使用包含(匹配)替换Div中的文本

Question

jsFiddle: http ://jsfiddle.net/WM6wG/

我正在尝试替换div中的文本,但似乎无法弄清楚为什么它不起作用.

HTML:

<div class="text">abc</div>
<div class="text">foo</div>
<div class="text">bar</div>

jQuery的:

var match = 'abc';
if ($('div.text:contains(match)')) {
    $('div.text').html(function(){
        $(this).replaceText(match, 'xyz');
    }
}

理想情况下,预期的输出应该是:xyz foo bar但它仍然存在abc foo bar,我做错了什么？

Answer 1

您的代码存在一些问题:

1. 您正在搜索"匹配"而不是变量的值match.

2. 你的if陈述毫无意义,因为你div.text在下一行有一个新的选择器.因此,如果其中一个元素匹配,则无论如何,您的代码将针对所有匹配元素运行此代码.

3. 你的html()方法没有返回任何东西.

4. replaceText()不是标准功能.除非这是您自己制作的自定义函数,否则您使用的是replaceText()插件,请将其替换为replace()

var match = 'abc';
$("div.text:contains(" + match + ")").each(function(){
   var $this = $(this);
    $this.html(function(){
        return $this.html().replace(match, "xyz");
    });
});

现场演示: http ://jsfiddle.net/wh7xn/

如果您想要替换多个"abc"实例,请使用RegEx:

var match = 'abc';
var re = new RegExp(match,"g");
$("div.text:contains(" + match + ")").each(function(){
   var $this = $(this);
    $this.html(function(){
        return $this.html().replace(re, "xyz");
    });
});

现场演示:http://jsfiddle.net/wh7xn/2/