jquery - 使用 contains(match) 替换 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/

Answer 2

当您这样做时，$('div.text:contains(match)')您正在搜索包含文字字符串“匹配”的 div。

你可以这样做：$('div.text:contains(' + match + ')')

请注意，变量 match 不包含对 jquery 选择器有意义的任何内容，例如).

Answer 3

查看更新的小提琴

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

2件事！

1. 这'('+match+')'
2. 您忘记了关闭 html 调用的函数后的括号。
3. 函数 replaceText 的 js 文件（@Jasen 谢谢！）

Answer 4

这似乎在一行中完成（不包括您的 var 声明）：

var match = 'abc';
$('div.text:contains(' + match + ')').text($('div.text:contains(' + match + ')').text().replace(match, 'xyz'));

jsFiddle 示例

不需要 if 语句，而replace不是replaceText.

如果您将有多个匹配项，请使用以下命令：

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

jsFiddle 示例