Question

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<script>
$("div:contains('John')").css("text-decoration", "underline");
</script>

上面的代码会在包含“John”的总DIV中添加下划线。但是我怎么能只让“John”加下划线。
请有人帮助我。

Answer 1

你必须在一个范围内包装你的文字：

$("div:contains('John')").each(function()
{
    var $el = $(this);
    $el.html( $el.html().replace(/John/g, '<span style="text-decoration: underline">John</span>') );
});

http://jsfiddle.net/GP96T/2/

正如@Brad Christie所指出的那样，如果你知道你的属性中没有“John”，或者div没有孩子，你应该只使用它。

Answer 2

你可以改为：

$oldcontent = $("div:contains('John')").html();
$("div:contains('John')").html($oldcontent.replace('John', '<u>John</u>');

Answer 3

哈金的方式：

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<script>
    $("div:contains('John')").each(function(i,e){
        var $this = $(this);
        var html = $this.html()
            .replace(/John/g,'<span style="text-decoration:underline;">John</span>');
        $this.html(html);
    });
</script>

见here

但要小心，如果链接或标题标签中有“John”，这也会替换这些实例。 e.g。

<div><img src="..." title="This is John" /></div>

变为：

<div><img src="..." title="This is <span style="text-decoration:underline;">John</span>" /></div>

（我不敢想象）

如何为通过contains（）搜索的文本添加下划线

3 个答案: