Question

假设我在HTML中有div和p，它们都包含相同的文本。我想突出显示来自html段落的搜索文本。我怎么能用jQuery做到这一点？

像

<div>Hello</div>
<div>World</div>
<p>Hello</p>
<p>World</p>

我想在段落标签中突出显示“世界”。

Answer 1

您可以向整个p元素添加一个类。

$('p:contains("Hello")').addClass('highlight');

否则，您需要iterate over the text nodes and then wrap the match with a span。

Answer 2

使用:contains选择器。

var str = "World";

$('p:contains('+str+')').css('background-color', 'yellow');

<强> Fiddle here

Answer 3

$('p').each(function(index) { // Find every paragraph and run through them
    if($(this).text() === "world") { // Check if current paragraph's text is "world"
        $(this).addClass("itemFound"); // Apply styling
    }
});

Answer 4

这将执行不区分大小写的搜索并添加突出显示类。

var str = /world/gi;
jQuery("p").each(function() {
    if(jQuery(this).text().match(str) {
        jQuery(this).addClass("highlight");
    }
});

Answer 5

在体内使用

<script>

    $("body").find("p").eq(1).css("background-color","green");
</script>

如何使用jQuery在HTML中突出显示<p> not </p> <div>？</div>

5 个答案: