Match all whitespace in an HTML string with JavaScript

Question

Lets say you have an HTML string like this:

<div id="loco" class="hey" >lorem ipsum pendus <em>hey</em>moder <hr /></div>

And need to place <br/> elements after every space character.... which I was doing with:

HTMLtext.replace(/\s{1,}/g, ' <br/>');

---

However, the problem is that this inserts breaks after space characters in-between tags (between tag properties) too and I'd of course like to do this for tag textual contents only. Somehow I was always really bad with regular expressions - could anyone help out?

So basically do my original whitespace match but only if its not between < and > ?

Answer 1

Regex is not a good tool for this. You should be working with the DOM, not with the raw HTML string.

For a quick-and-dirty solution that presupposes that there are no < or > character in your string except those delimiting a tag, you can try this, though:

result = subject.replace(/\s+(?=[^<>]*<)/g, "$&<br/>");

This inserts a <br/> after whitespace only if the next angle bracket is an opening angle bracket.

Explanation:

\s+     # Match one or more whitespace characters (including newlines!)
(?=     # but only if (positive lookahead assertion) it's possible to match...
 [^<>]* #  any number of non-angle brackets
 <      #  followed by an opening angle bracket
)       # ...from this position in the string onwards.

Replace that with $& (which contains the matched characters) plus <br/>.

This regex does not check if there is a > further behind, as this would require a positive look*behind* assertion, and JavaScript does not support these. So you can't check for that, but if you control the HTML and are sure that the conditions I mentioned above are met, that shouldn't be a problem.

Answer 2

See this answer for iterating the dom and replacing whitespaces with <br /> elements. The adapted code would be:

(function iterate_node(node) {
    if (node.nodeType === 3) { // Node.TEXT_NODE
        var text = node.data,
            words = text.split(/\s/);
        if (words.length > 1) {
            node.data = words[0];
            var next = node.nextSibling,
                parent = node.parentNode;
            for (var i=1; i<words.length; i++) {
                var tnode = document.createTextNode(words[i]),
                    br = document.createElement("br");
                parent.insertBefore(br, next);
                parent.insertBefore(tnode, next);
            }
        }
    } else if (node.nodeType === 1) { // Node.ELEMENT_NODE
        for (var i=node.childNodes.length-1; i>=0; i--) {
            iterate_node(node.childNodes[i]); // run recursive on DOM
        }
    }
})(content); // any dom node

(Demo at jsfiddle.net)

Answer 3

Okay, so you don't want to match spaces inside HTML tags. Only regular expressions isn't sufficient for this. I'll use a lexer to do the job. You can see the output here.

var lexer = new Lexer;

var result = "";

lexer.addRule(/</, function (c) { // start of a tag
    this.state = 2; // go to state 2 - exclusive tag state
    result += c; // copy to output
});

lexer.addRule(/>/, function (c) { // end of a tag
    this.state = 0; // go back to state 0 - initial state
    result += c; // copy to output
}, [2]); // only apply this rule when in state 2

lexer.addRule(/.|\n/, function (c) { // match any character
    result += c; // copy to output
}, [2]); // only apply this rule when in state 2

lexer.addRule(/\s+/, function () { // match one or more spaces
    result += "<br/>"; // replace with "<br/>"
});

lexer.addRule(/.|\n/, function (c) { // match any character
    result += c; // copy to output
}); // everything else

lexer.input = '<div id="loco" class="hey" >lorem ipsum pendus <em>hey</em>moder <hr /></div>';

lexer.lex();

Of course, a lexer is a very powerful tool. You may also skip angled brackets inside the value of an attribute in a tag. However I'll leave that for you to implement. Good luck.