Question

我正在寻找一种方法来替换HTML字符串中的所有单词，以便用标记包装它们。我试过通过空格分割然后迭代单词并替换，但问题是某些单词不以空格开头或结尾（例如新段落）。也许有某种正则表达可以帮助或其他创造性的方法？

例如，让我们使用html字符串：

<h1>Lorem ipsum dolor sit amet</h1>
<p>consectetur adipisicing elit</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam</p>

这是我到目前为止的代码，它的工作效果不够好：

var html = $("#text").html();
var text = $("#text").text();
var words = text.split(' ');
for (var i = 0; i < words.length; i++) {
    html = html.replace(words[i], '<span style="color: red;">' + words[i] +'</span>');
}
$("#text").html(html);

jsfiddle：http://jsfiddle.net/nd6a3/3/

Answer 1

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包含字符串text中所有单词的数组。

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

从那以后，您可以使用循环来替换单词。

Answer 2

使用html时最好使用结构化方法。普通的正则表达式太愚蠢了。

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

http://jsfiddle.net/XhwMY/

关于您在希伯来语，阿拉伯语等中查找单词的评论， - javascript不支持：\w+仅适用于拉丁字母。唯一的解决方法是使用显式unicode字符范围。例如，对于希伯来语，表达式将如下：

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

This tool将帮助您找到所需的范围。

Answer 3

您可以尝试使用以下正则表达式：

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

这是你的小提琴：http://jsfiddle.net/xbcLt/1/

修改：
正如您在上面的代码中所看到的，一切都可以用一个处理函数作为jQuery.html参数包装。我还更新了小提琴的链接，以匹配更新的代码。

Answer 4

只需将/\w+/g替换为<span style="color: red">\1</span>，就像这样：

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

这将产生以下输出：

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

注意：这将仅处理文本。如果您在HTML上使用它，它也会将<h1>变为<<span style="color: red;">h1</span>>。

替换HTML中的所有单词

4 个答案: