JavaScript split（）弄乱了我的html标签

Question

I have a 2500-words string that I need to be put in different DIV . I have used the text = text.split(' ') function to retrieve each word and then have my DIVs filled until DIV.scrollHeight becomes higher than DIV.offsetHeight , then it goes to the next DIV .

The problem I encounter is that my HTML tags in my 2500-word string are completely messed up: it closes my <b> tags where it shouldn't, doesn't display the </b> where it should, doesn't display the <font part of this tag, doesn't display the </font> , etc.

Any idea why?

Many thanks!

Edit: As requested, here is the entire jQuery code. Pardon me in advance for any mistake in it :)

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);

Answer 1

I think the problem could be that you might be splitting tags and then the browser tries to fix it messing it all up.

With you algorithm you might end up with something like:

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

Which is clearly not the best thing. I think you should keep track of the opening/closing tags and only change container div when they're all closed

Answer 2

I have solved the problem. I used the following Regex to catch the words and HTML tags and used the following .replace() to add spaces after all my <br/> (which was the source of the problem).

• 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);

This did the trick.

Thanks all!

Answer 3

If you want to treat tag contents as single words you can try instead of var TABLEAU = texte.split(' '); to use

var nodes = $('<div/>',{ html: texte }).contents();
var TABLEAU = nodes.map(function(){
    return this.nodeType === 3 ? $(this).text().split(' ') : this;
}).get();