0

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

4

4 回答 4

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

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

从那里你可以使用你的循环来替换单词。

于 2013-10-16T10:50:48.230 回答
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>")

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

于 2013-10-16T11:11:35.960 回答
1

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

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

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

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

于 2013-10-16T11:24:39.400 回答
0

只需像这样/\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>>.

于 2013-10-16T10:57:06.723 回答