替换HTML中的所有单词

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

这是我迄今未工作不够好代码：

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/

来源

2013-10-16 Light

所以在示例文本中预期的输出是什么？ – Liam

你给了我们一个“更改前”字符串。你能告诉我们你想要“变更后”字符串的样子吗？ – h2ooooooo

输出应该是每个单词将用包装。我不想在我的问题中编写完整的输出，因为文本太长:) – Light

在使用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将帮助您找到您所需要的范围。

来源

2013-10-16 11:11:35 georg

谢谢！我怎样才能更新正则表达式，以便它也会匹配像希伯来文，俄文，拉丁文等非英文字符？ – Light

@Light：updated – georg

我不是最好的正则表达式，可以请写出完整的替换方法，包括希伯来字符？ – Light

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-16 10:50:48 Broxzier

谢谢，我的文本还将包含特殊字符，如希伯来语，阿拉伯语，拉丁语等。看起来这个正则表达式不会'在那工作。是否有可能编写该正则表达式，以便它将采用这些字符？ – Light

@Light您可以使用'/ \ b（[^ \ s] +？）\ b/g'来检查单词边界。 – Broxzier

只需使用<span style="color: red">\1</span>像这样替换/\w+/g：

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-16 10:57:06 h2ooooooo

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

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

这里是为您小提琴：http://jsfiddle.net/xbcLt/1/

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

来源

2013-10-16 11:24:39 matewka

替换HTML中的所有单词

回答

相关问题