如何使用jQuery替换字符串的一部分并在每个单词周围添加标签

Question

我需要使用jQuery将特定短语的任何实例（例如My Phrase）替换为类似于<span class="highlight">My</span> <span class="highlight">Phrase</span>的内容。我对jQuery中的小部分内容还算熟悉，但是这个问题一直让我束手无策。我在网上找到了一些部分解决方案，但是无法将它们组合起来使其正常工作。希望能得到帮助。

- user1165396

---

请向我们展示您尝试过的内容 - 上下文将有助于回答问题。 - Alnitak

例如，现有的文本是否是单个HTML标记的唯一内容？ - Alnitak

你是否碰巧将此作为带有 AJAX 调用的自动完成的一部分使用？ - Mark Schultheiss

这个短语是否总是文本，还是也可以包含HTML标签？如果它可以包含标签，那么解决方案就会有所改变。 - mrtsherman

Answer 1

我认为你会想要查看jQuery的.wrap()函数。

这个函数基本上允许你将jQuery数组的部分内容包裹在你选择的HTML元素中，可以在这里看一下：

http://api.jquery.com/wrap/

你可能需要更多的技巧来将内容转换成你想要的格式，但是你可以使用 string.split(' ') 将 HTML 数组分解为单词，然后使用 'wrap()' 将这些单词包装在你的 HTML 中。

伪代码：

var myPhrase = "My Phrase";
$.each(myPhrase.split(' ').slice(0,-1), function(index, item) {
    item.wrap('<span class=\"highlight\"/>');
});

- dougajmcdonald

Answer 2

你的问题有一些细节被省略了，但是假设字符串总是纯文本，那么将其按空格分割并用标签包装就很简单了。jQuery中也有wrap函数可以实现这个功能，我会给你提供一个例子。但在这个简单的情况下，这是一个直截了当的答案。

http://jsfiddle.net/tBR2r/

var words = $('body').text().split(' ');
var wrappedText = '';
for (var i = 0; i < words.length; i++) {
    wrappedText += '<span>'+words[i]+'</span> ';
}
$('body').html(wrappedText);

- mrtsherman

Answer 3

试试这个。

var str = "...My Phrase....";

str = str.replace(/My Phrase/g, '<span class="highlight">My</span> <span class="highlight">Phrase</span>');

你也可以查看这个链接获取相关信息。

http://www.tizag.com/javascriptT/javascript-string-replace.php

- ShankarSangoli

---

我的天，这太丑了。我认为原帖作者可能希望匹配的短语不需要硬编码到程序逻辑中。 - Alnitak