0

別の に配置する必要がある 2500 語の文字列がありますDIV。関数を使用してtext = text.split(' ')各単語を取得し、よりも高くなるDIVsまで入力してから、次の に進みます。DIV.scrollHeightDIV.offsetHeightDIV

私が遭遇した問題は、2500 語の文字列の HTML タグが完全に台無しになっていることです。<b>タグを閉じるべきではない場所で閉じ、本来あるべき場所を表示せず、このタグの一部を</b>表示せず、タグを閉じません。などを<font表示しない</font>

理由はありますか？

どうもありがとう！

編集: 要求どおり、ここに jQuery コード全体があります。間違いがある場合は事前にお許しください:)

function addText(texte)
   {
        // var texte = texte.replace('<', '&lt;');
        // var texte = texte.replace('>', '&gt;');
        var container = $('DIV[id^=apDiv]').find('DIV#bloc_prim');
        console.log('NOMBRE DE CONTAINER : '+container.length);
        var length = texte.length;
        console.log('LONGUEUR DU TEXTE '+length+' caractères');
        // container.html(texte);
        var hauteurDiv = container.prop('offsetHeight');
        var hauteurContent = container.prop('scrollHeight');
        length = Math.floor((length * hauteurDiv)/hauteurContent);

        console.log(hauteurContent);
        // container.html(texte.substring(0, length));
        var hauteurRestante = hauteurContent - hauteurDiv;

        console.log(hauteurRestante);

        var TABLEAU = texte.split(' ');
        // var TABLEAU = texte.match(/<\s*(\w+\b)(?:(?!<\s*\/\s*\1\b)[\s\S])*<\s*\/\s*\1\s*>|\S+/g);
        console.log('LONGUEUR TABLEAU : '+TABLEAU.length+' occurences');
        // console.log(TABLEAU[4]);
        i = 0;
        hauteurTotale = container.prop('scrollHeight');
        console.log(container.prop('offsetHeight'));
        console.log(hauteurTotale);
        while(i < TABLEAU.length)
        {

            while(hauteurTotale <= container.prop('offsetHeight'))
            {
                container.append(TABLEAU[i]+' ');
                i++;
                hauteurTotale = container.prop('scrollHeight');
                console.log(i+':'+hauteurTotale+' --- '+container.prop('offsetHeight'));
            }
            if(i < TABLEAU.length)
            {
                var clone = container.parent('DIV[id^=apDiv]').clone(true); // On copie la DIV
                $('BODY').append(clone); // On colle la partie copiée
                clone.find('DIV#bloc_prim').empty();
            }
            var hauteurTotale = clone.find('DIV#bloc_prim').prop('scrollHeight');
            console.log(hauteurTotale);
            while(hauteurTotale <= clone.find('DIV#bloc_prim').prop('offsetHeight'))
            {
                if(i < TABLEAU.length)
                {
                    clone.find('DIV#bloc_prim').append(TABLEAU[i]+' ');
                    i++;
                    hauteurTotale = clone.find('DIV#bloc_prim').prop('scrollHeight');
                    console.log(i+':'+hauteurTotale+' --- '+container.prop('offsetHeight'));
                }
                else
                {
                    break;
                }

            }
        }
        console.log(i+'->'+TABLEAU.length);
4

3 に答える 3

1

問題は、タグを分割している可能性があり、ブラウザがそれを修正しようとしてすべてが台無しになっている可能性があると思います.

アルゴリズムを使用すると、次のような結果になる可能性があります。

<div>
    <p>The text starts here
</div>
<div>
    and ends here</p>
</div>

これは明らかに最善のことではありません。開始/終了タグを追跡し、それらがすべて閉じられている場合にのみコンテナー div を変更する必要があると思います

于 2013-10-08T09:49:27.367 に答える