Replace All Words In Html

I am looking for a way to replace all the words in an HTML string in order to wrap them with tag. I have tried splitting by empty space then iterating through the words and replaci

Solution 1:

It's better to use a structured approach when working with html. Plain regexes are too dumb for that.

$("#text *").contents().filter(function() {
    returnthis.nodeType == 3
}).replaceWith(function() {
    returnthis.nodeValue.replace(/\b(\w+)\b/g, "<u>$1</u>")
});

http://jsfiddle.net/XhwMY/

Regarding your comment about finding words in Hebrew, Arabic etc, - javascript doesn't support that: \w+ only works for latin letters. The only workaround is to use explicit unicode character ranges. For example, for Hebrew, the expression will be like this:

this.nodeValue.replace(/[\w\u0590-\u05FF]+/g, "<u>$&</u>")

This tool will help you to find the ranges you need.

Solution 2:

var text = "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
var words = text.match(/\w+/g);
// Or test.match(/\b([^\s]+?)\b/g) to support any non standard characters.

words contains an array of all the words in the string text.

["sed", "do", "eiusmod", "tempor", "incididunt", "ut", "labore", "et", "dolore", "magna", "aliqua"]

From there on you can use your loop to replace the words.

Solution 3:

You can try with the following regex:

$("#text").html(function(i, oldHtml) {
    return oldHtml.replace(/([^ ]+)(?![^>]>)/gi, "<span style='color: red;'>$1</span>");
});

Here's a fiddle for you: http://jsfiddle.net/xbcLt/1/

EDIT: As you can see in the above code, everything can be wrapped with one handler function as a jQuery.html parameter. I also updated link to the fiddle, to match the updated code.

Solution 4:

Simply replace /\w+/g with <span style="color: red">\1</span> like so:

var str = 'Lorem ipsum dolor sit amet\n' +
'consectetur adipisicing elit\n' +
'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n' +
'Ut enim ad minim veniam\n';

str = str.replace(/\w+/g, function(match) { return'<span style="color: red;">' + match + '</span>' });

Which will result in the following output:

<spanstyle="color: red;">Lorem</span><spanstyle="color: red;">ipsum</span><spanstyle="color: red;">dolor</span><spanstyle="color: red;">sit</span><spanstyle="color: red;">amet</span><spanstyle="color: red;">consectetur</span><spanstyle="color: red;">adipisicing</span><spanstyle="color: red;">elit</span><spanstyle="color: red;">sed</span><spanstyle="color: red;">do</span><spanstyle="color: red;">eiusmod</span><spanstyle="color: red;">tempor</span><spanstyle="color: red;">incididunt</span><spanstyle="color: red;">ut</span><spanstyle="color: red;">labore</span><spanstyle="color: red;">et</span><spanstyle="color: red;">dolore</span><spanstyle="color: red;">magna</span><spanstyle="color: red;">aliqua</span>.
<spanstyle="color: red;">Ut</span><spanstyle="color: red;">enim</span><spanstyle="color: red;">ad</span><spanstyle="color: red;">minim</span><spanstyle="color: red;">veniam</span>

Note: This will only work with text. If you use this on HTML it will also turn <h1> into <<span style="color: red;">h1</span>>.