Javascript split() 弄乱了我的 html 标签答案

【问题标题】：Javascript split() messes up my html tagsJavascript split() 弄乱了我的 html 标签
【发布时间】：2013-10-08 09:45:23
【问题描述】：

我有一个 2500 字的字符串，需要放入不同的 DIV。我使用text = text.split(' ') 函数检索每个单词，然后填充我的DIVs，直到DIV.scrollHeight 高于DIV.offsetHeight，然后它转到下一个DIV。

我遇到的问题是我的 2500 字字符串中的 HTML 标记完全搞砸了：它关闭了我不应该的标签，不显示，不显示该标签的<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);

【问题讨论】：

你能发布你用来生成 Html 的代码，以及 Html 输出吗？
完成。 HTML 输出是这样的：JDLI : Ellen Page, Williem Dafoe, Hans Zimmer… De tels noms n’entretiennent pas l’ambigüité avec la notion de film interactif ? David Cage : Personnellement, je n’ai jamais ressenti d’ambiguïté à ce sujet. 其中 标签应该在第一行的句尾，Cage 之后是第二行。

标签： javascript jquery regex string split

【解决方案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();

【讨论】：

感谢您的回答。我已经使用了您的代码，但return [...] : this; 给了我[object HTMLBRElement] 而不是实际的 
这发生在你追加的地方，因为你有.append(TABLEAU[i] + '')..它试图将元素转换为字符串..用.append(TABLEAU[i]).append(' ');替换它们（它是在您的代码中的两个地方找到)

【解决方案2】：

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

使用你的算法，你最终可能会得到类似的结果：

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

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

【讨论】：

您好乔纳斯，感谢您的回答。我清楚地知道我最终会得到一些混乱的 HTML。我正在寻找的是让我的 jQuery 将我的 HTML 标签视为单词。我发现这个问题对我的问题有所帮助。 link

【解决方案3】：

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

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

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

这成功了。

谢谢大家！

【讨论】：