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>'
  ));
}​);​

yourstring がタグまたは属性にある場合、これは問題になることに注意してください。

デモンストレーション

ハンドラーを段落 (または、リンクなどの文字列を含む可能性のある要素) にハンドラーをアタッチする前に、このコードを実行するように注意してください。

于 2012-12-08T18:59:10.517 に答える
1

dystroy の回答の問題は、HTML 全体を上書きすることです。そのため、テキストを含むノード内にハンドラーがある場合、それらは削除されます。

正しい解決策は、テキスト範囲を使用して、その周囲のすべての HTML ではなく、テキスト自体のみを更新することです。JavaScript を使用してテキスト範囲をハイライトするを参照してください

そして楽しみのために、 FF と Chromeで動作する組み込みメソッドwindow.findがあります。ただし、これは標準ではなく、一度に 1 つしか見つかりません。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 に答える