Javascript 替换HTML中的所有单词

我正在寻找一种方法来替换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>

Lorem ipsum dolor sit amet
阿迪皮斯精英圣职酒店

这是临时性的劳动和就业机会

我们在这里吃小菜

以下是迄今为止我掌握的代码，这些代码工作得不够好：

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

var html=$（“#text”）.html（）；
var text=$（“#text”）.text（）；
var words=text.split（“”）；
for（var i=0；i

JSFIDLE：

单词

包含字符串

文本

中所有单词的数组

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

从那时起，您可以使用循环来替换单词

单词

包含字符串

文本

中所有单词的数组

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

---

从这里开始，您可以使用循环替换单词。

只需将

/\w+/g

替换为

\1

，如下所示：

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

var str='Lorem ipsum door sit amet\n'+
'Concertetur Adipising elit\n'+
“这是一个临时的劳动和就业机会。\n”+
"我们是最小的威尼斯人";；
str=str.replace（/\w+/g，函数（match）{return'+match+'}）；

这将产生以下输出：

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

Lorem ipsum dolor sit amet
阿迪皮斯精英圣职酒店
这是临时性的劳动和就业机会。
我们在这里吃小菜

---

注意：这仅适用于文本。如果在HTML上使用此选项，它也会将

转换为

只需将

/\w+/g

替换为

\1

，如下所示：

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

var str='Lorem ipsum door sit amet\n'+
'Concertetur Adipising elit\n'+
“这是一个临时的劳动和就业机会。\n”+
"我们是最小的威尼斯人";；
str=str.replace（/\w+/g，函数（match）{return'+match+'}）；

这将产生以下输出：

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

Lorem ipsum dolor sit amet
阿迪皮斯精英圣职酒店
这是临时性的劳动和就业机会。
我们在这里吃小菜

---

注意：这仅适用于文本。如果在HTML上使用此选项，它也会将

转换为

处理HTML时最好使用结构化方法。普通正则表达式对此太愚蠢了

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

---

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

在处理html时，最好使用结构化方法。普通正则表达式对此太愚蠢了

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

---

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

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

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

$（“#text”）.html（函数（i，oldHtml）{
返回oldHtml.replace（/（[^]+）（？！[^>]>）/gi，“$1”）；
});

给你一把小提琴：

编辑：

---

正如您在上面的代码中所看到的，所有内容都可以用一个处理函数包装为

jQuery.html

参数。我还更新了小提琴的链接，以匹配更新的代码。

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

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

$（“#text”）.html（函数（i，oldHtml）{
返回oldHtml.replace（/（[^]+）（？！[^>]>）/gi，“$1”）；
});

给你一把小提琴：

编辑：

---

---

正如您在上面的代码中所看到的，所有内容都可以用一个处理函数包装为

jQuery.html

参数。我还更新了小提琴的链接，以匹配更新的代码。

那么在示例文本中，预期的输出是什么？您给了我们一个“更改前”字符串。您能告诉我们您希望“更改后”字符串是什么样子的吗？输出应该是每个单词都要用包装。我不想在我的问题中写出完整的输出，因为文本太长：）你似乎在用一个空格将每个单词包装起来。为什么不干脆把整个句子包装起来呢？@Andy我打算在包装后用它来完成更复杂的任务（获取每个单词的位置），那么在示例文本中，预期的输出是什么呢？您给了我们一个“更改前”字符串。您能告诉我们您希望“更改后”字符串是什么样子的吗？输出应该是每个单词都要用包装。我不想在我的问题中写出完整的输出，因为文本太长：）你似乎在用一个空格将每个单词包装起来。为什么不干脆把整个句子包装起来呢？@Andy包装完成后，我将用它来完成更复杂的任务（获取每个单词的位置）。谢谢，我的文本还将包含特殊字符，如希伯来语、阿拉伯语、拉丁语等。看来this regex在这方面不起作用。是否可以编写该正则表达式，以便它也可以使用这些字符？@Light您可以使用

/\b（[^\s]+？）\b/g

检查单词边框。谢谢，我的文本还将包含特殊字符，如希伯来语、阿拉伯语、拉丁语等。似乎此正则表达式在这方面不起作用。是否可以编写该正则表达式，以便它也使用这些字符？@Light您可以使用

/\b（[^\s]+？）\b/g

检查单词边框。谢谢！我如何更新正则表达式，使其也能匹配非英语字符，如希伯来语、俄语、拉丁语等？我不是正则表达式的最佳使用者，能否请编写包含希伯来语字符的完全替换方法？现在只有一个问题。如果单词有“.”或“…”等标点符号，则正则表达式不在单词中包含这些字符。你能更新正则表达式，使它在单词中包含标点符号吗？例如，我已经更新了你的JSFIDLE。谢谢！我如何更新正则表达式，使其也能匹配非英语字符，如希伯来语、俄语、拉丁语等？我不是正则表达式的最佳使用者，可以请wri