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

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，我将以类(class)为基础，所以当这个词再次出现在故事​​中时，它会播放相同的声音)。

Answer 1

像这样？

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，并根据所有的词构造正则表达式，这样它们就可以一次匹配，并将匹配的值替换为字符串并使用匹配 token $1