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

_ | 70

（最终的计划是让那些单词在按下时播放某些SFX并且我基于课程，所以当这个单词在故事中再次出现时它会播放相同的声音）。

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并根据所有单词构造正则表达式，以便可以立即匹配它们并将匹配的值替换为字符串并使用匹配标记， $ 1

Answer 2

您的代码存在一些问题：

您使用相同的变量i和w两次。他们互相覆盖。虽然这没有什么区别
您使用.val代替.html。 .val只应用于表单字段。
您在替换调用中交换了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'];
    $.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/

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

4 个答案: