0

我有一个 2500 字的字符串，需要放入不同的DIV. 我已经使用该text = text.split(' ')功能来检索每个单词，然后DIVs填充直到DIV.scrollHeight变得高于DIV.offsetHeight，然后进入下一个DIV。

我遇到的问题是我的 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

我已经解决了这个问题。我使用以下正则表达式来捕获单词和 HTML 标记，并使用以下内容.replace()在我之后添加空格<br/>（这是问题的根源）。

•var texte = texte.replace(/<br>/g, '<br/> ');

•var TABLEAU = texte.match(/<\s*(\w+\b)(?:(?!<\s*\/\s*\1\b)[\s\S])*<\s*\/\s*\1\s*>|\S+/gi);

这成功了。

谢谢大家！

于 2013-10-08T12:40:44.877 回答
1

如果您想将标签内容视为单个单词，您可以尝试而不是var TABLEAU = texte.split(' ');使用

var nodes = $('<div/>',{ html: texte }).contents();
var TABLEAU = nodes.map(function(){
    return this.nodeType === 3 ? $(this).text().split(' ') : this;
}).get();
于 2013-10-08T12:41:33.163 回答
1

我认为问题可能是您可能正在拆分标签，然后浏览器尝试修复它，把它搞砸了。

使用您的算法，您最终可能会得到以下结果：

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

这显然不是最好的事情。我认为您应该跟踪打开/关闭标签，并且仅在它们全部关闭时更改容器 div

于 2013-10-08T09:49:27.367 回答