用数组查找文本并用类等于文本的文本周围的链接替换

Question

所以使用 jQuery，我尝试使用数组来搜索使用数组的段落元素，当它找到某些单词时，它将该单词转换为与该类的链接。

我正在尝试使用这个：

jQuery('.story').html(function(i,html) {
    var w = ['ocean','waves','bed', 'swimming'];
    $.each(w,function(i,w) {
        html = html.replace(new RegExp('<a href="" class="' + w + '">' + w + '</a>', 'g'),w[i]);
    });
    return html;
});

jsfiddle

最终结果会将ocean 变成<a href="" class="ocean">ocean</a> 等。

但它似乎不起作用。我也不明白为什么。提前谢谢。

m(_ _)m

_|7O

（最终的计划是让这些词在按下时播放特定的 SFX，并且我以班级为基础，所以当这个词再次出现在故事​​中时，它会播放相同的声音）。

Answer 1

    var w = ['ocean','waves','bed', 'swimming'];
    $.each(w,function(i,w) {
        jQuery('.story').html(function(i,val) {
            val = val.replace(w,'<a href="" class="' + w + '">' + w + '<\/a>');
            return val;
         });  
    });

JS FIDDLE： http://jsfiddle.net/8XWf3/22/

Answer 2

您的代码存在一些问题：

1. 您使用相同的变量i 和w 两次。它们相互覆盖。虽然这在这里没有什么区别
2. 您使用.val 而不是.html。 .val 只能用于表单字段。
3. 您在 replace 调用中交换了 reg exp 和替换

试试这个：

jQuery('.story').html(function(i,val) {
    var w = ['ocean','waves','bed', 'swimming'];
    $.each(w, function(j,w) {
        val = val.replace(new RegExp(w, 'g'), '<a href="" class="' + w + '">' + w + '</a>');
    });
    return val;
});

另外说明：如果数组中的一个单词是另一个单词的子字符串，那么按照您设置的方式进行操作可能会给您带来麻烦。当心这个。

Answer 3

怎么样？

var arr = ['ocean','waves','bed', 'swimming'];
var result = $('.story').text();
$.each(arr, function (i, val) {
    result =
      result.replace(val, '<a href="" class="' + val + '">' + val + '</a>');
});
$('.story').html(result);

http://jsfiddle.net/8XWf3/21/

Answer 4

像这样？

var w = ['ocean','waves','bed', 'swimming'],
     reg = new RegExp('(' + w.join('|') + ')','g');

jQuery('.story').html(function(_, curHtml) {
     return curHtml.replace(reg,"<a href='#' class='$1'>$1</a>");
});

Demo

您需要使用html 而不是val 并根据所有单词构造正则表达式，以便它们可以一次匹配并将匹配的值替换为字符串并使用匹配标记$1