3

我需要编写一个函数，在我的 HTML 页面中的所有内容中搜索特定字符串，如果找到，则更改文本的颜色。

这可能吗？

谢谢

4

3 回答 3

8

你可以这样做：

CSS：

.someclass {
    color: red;
}

Javascript：

$('p:contains('+yourstring+')', document.body).each(function(){
  $(this).html($(this).html().replace(
        new RegExp(yourstring, 'g'), '<span class=someclass>'+yourstring+'</span>'
  ));
}​);​

请注意，如果您的字符串在标签或属性中，这会产生问题。

示范

在将处理程序附加到段落（或其中可能包含您的字符串的元素，例如链接）之前，请小心运行此代码。

于 2012-12-08T18:59:10.517 回答
1

dystroy 的答案的问题是它会覆盖整个 HTML，因此如果您在包含文本的节点中有任何处理程序，它们将被删除。

正确的解决方案是使用文本范围仅更新文本本身，而不是其周围的所有 HTML。请参阅使用 JavaScript 突出显示文本范围

为了好玩，有一个内置的方法window.find可以在FF 和 Chrome中使用。但它不在标准中，一次只能找到一个。就像 ctrl+f 一样。

window.find("anything");
于 2012-12-08T19:23:15.503 回答
0

JQuery 查找和更改字符串的样式>>仅复制粘贴并运行:)

  $('#seabutton').click(function()
        {
            var sea=$('#search').val();
            var cont=$('p').val();
            alert(cont);
            $('p:contains('+sea+')').each(function()
                 {
    /*          $(this).html($(this).html().replace(new RegExp(sea, 'g'),'<span class=someclass>'+sea+'</span>'));
     */            $(this).html($(this).html().replace(
                        new RegExp(sea, 'i'), '<span class=someclass>'+sea+'</span>'
                  )); 
            });

        });
        $('p').click(function()
        {
            $(".someclass").css("color", "black");
        });
        $('#search').blur(function()
        {
            $(".someclass").css("color", "black");

        });

    })


    </script>
    <style type="text/css">
    .someclass {
        color: red;
    }
    </style>
    </head>
    <body>
    <!-- Select Country:<select id="country" name="country">
    </select>
    <table id="state" border="1">


    </table> -->
    <br>
    Enter Text:<input type="text" id="search"/><input type="button" id="seabutton" value="Search"/>
    <div id="serach">
    <p>This is ankush Dapke
    </p>

    </div>
    </body>
    </html>
于 2015-10-01T10:46:18.063 回答