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

您的代码存在一些问题：

您正在搜索“匹配”而不是变量match的值。
您的if声明毫无意义，因为您在下一行有div.text的新选择器。因此，如果其中一个元素匹配，那么无论如何，您的代码都将针对所有匹配的元素运行。
您的html()方法未返回任何内容。
replaceText()不是标准函数。除非这是您所做的自定义功能，或者您使用的是replaceText() plugin，否则请将其替换为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)')时，您正在搜索包含文字字符串'match'的div。

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

请注意，变量匹配不包含jquery选择器的任何重要内容，例如)。

Answer 3

请参阅updated fiddle

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

2件事！

'('+match+')'
您在关闭html调用的函数后忘记了一个括号。
函数replaceText的js文件（@Jasen谢谢！）

Answer 4

这似乎在一行中完成（不计算你的var声明）：

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

<强> jsFiddle example

如果需要声明，则为“否”replace而不是replaceText。

如果您有多个匹配项，请使用：

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

<强> jsFiddle example

使用包含（匹配）替换Div中的文本

4 个答案: