Javascript JQuery查找和更改字符串的样式_Javascript_Jquery_Html_Css

Javascript JQuery查找和更改字符串的样式

javascript jquery html css

Javascript JQuery查找和更改字符串的样式,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我需要编写一个函数来搜索HTML页面中的所有内容，寻找特定的字符串，如果找到了，则更改文本的颜色这可能吗谢谢您可以这样做： CSS: Javascript: $('p:contains('+yourstring+')', document.body).each(function(){ $(this).html($(this).html().replace( new RegExp(yourstring, 'g'), '<span class=someclass>

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

这可能吗

谢谢

您可以这样做：

CSS:

Javascript:

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

$（'p:contains（'+yourstring+'），document.body）{
$（this）.html（$（this）.html（）.replace(
新的RegExp（yourstring，'g'），“”+yourstring+“”
));
});

请注意，如果字符串位于标记或属性中，则会出现问题

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

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

正确的解决方案是只更新文本本身，而不是它周围的所有HTML。请参阅

有趣的是，有一个内置的方法可以在中工作。但它不在标准中，一次只能找到一个。就像ctrl+f一样

window.find("anything");

JQuery查找并更改字符串样式>>仅复制粘贴并运行：）

$（'seabutton'）。单击（函数（）
{
var sea=$（'#search'）.val（）；
var cont=$（'p'）.val（）；
警报（续）；
$（'p:contains（'+sea+'））。每个（函数（）
{
/*$（this.html（$（this.html（）.replace）（新的RegExp（sea，'g'），''+sea+''）；
*/$（this）.html（$（this）.html（）.replace(
新RegExp（sea，'i'），“+sea+”
)); 
});
});
$（'p'）。单击（函数（）
{
$（“.someclass”）.css（“颜色”、“黑色”）；
});
$（'#search'）.blur（函数（）
{
$（“.someclass”）.css（“颜色”、“黑色”）；
});
})
.某个班级{
颜色：红色；
}


输入文本：
我是安库什·达普

这会不会包装包含字符串的整个div，而不仅仅是字符串本身？@JuanMendes我不知道你的意思。我添加了一个演示我错了。。。但是，这种方法的缺点是它会覆盖HTML，因此，如果节点上有任何被替换的处理程序，那么您已经删除了它们。理想情况下，您可以找到文本范围并从中创建一个节点。是的。我将其更改为针对P元素。这也避免了其他问题。

window.find("anything");

  $('#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>