2

html 内のテキストを検索し、強調表示されている html 自体を破損することなく、その html を強調表示する必要があります。

置換するテキスト:

これはテキスト 2 です。これはテキスト 3 です。

HTML:

This is text 1. <p>
This is <span>Text 2</span>. This <div>is</div> text 3.
</p> This is Text 4.

望ましい出力:

This is text 1.<p>
<strong class="highlight">This is <span>Text 2</span>. This <div>is</div> text 3. </strong>
</p> This is Text 4.

編集：申し訳ありませんが、適切に説明できなかった場合。

検索している文字列が HTML のテキストに一致する場合、(php または javascript で) HTML ドキュメントの一部を強調表示する必要があります。

ただし、検索している文字列は検索文字列と同一ではないことに注意してください。余分な HTML が含まれている可能性があります。

たとえば、この文字列「This is text.」を検索する場合、「This is text.」、「<anyhtmltag>This</anyhtmltag> is text.」、「This <anyhtmltag>is</」と一致する必要があります。 anyhtmltag> テキスト。", "この <anyhtmltag> はテキスト</anyhtmltag> です。" 等々。

4

2 に答える 2

3

サーバー側（たとえばPHPを使用し、既に強調表示された出力を含むHTMLコードをブラウザーに返す）またはクライアント側（たとえばjQueryを使用して何かを見つけて強調表示する）でこれを実現する場合は、より具体的にする必要があります。サーバーから返されたHTMLで）？

jQuery（クライアント側）の適切なソリューションを見つけるのに約10秒かかったので、何もせずに（ネットを検索するなど）、質問をしただけのようです。そして、3つの最も重要な検索結果は、StackExchangeとjQueryのドキュメント自体にありました。

jQueryを使用してテキストを検索しますか？

jQueryを使用してテキスト文字列を検索しますか？

jQuery .wrap（）関数の説明

非常に簡単な例を次に示します。

<script>
     $('div:contains("This is <span>Text 2</span>. This <div>is</div> text 3")')wrap("<strong class="highlight"></strong>");
</script>

それは一般的に、あなたが見つけたいものを見つけて、あなたがそれを包みたいものでそれを包みます。

これは、検索したいテキストがdiv内にある場合に機能します。そのため、私はを使用し$('div:containsました。ページ全体を検索したい場合は、$('*:contains代わりに使用できます。

これは、jQueryとクライアント側の強調表示の例です。PHP（サーバーサイド）バージョンの場合は、GoogleまたはStackOverflowのいずれかで少し検索すると、多くの例が確実に見つかります。

編集：あなたの更新された質問について。検索したいテキストボックスを使用してそこに配置する場合は、もちろん次のようなものを使用できます。

<script>
    $("#mysearchbox").change(
    {
        $('div:contains($("#mysearchbox")').wrap("<strong class="highlight"></strong>");
    });
</script>

たとえば、次のように検索ボックスを別の場所に定義します。

<input id="mysearchbox"></input>

このようにして、検索ボックスにイベントを添付します。このonChangeイベントは、何かを入力するたびに発生し、入力したものをすべて検索（および強調表示）する必要があります。この例は手作業（メモリから）であることに注意してください。書いているところからjQueryにアクセスできないので、今書いたものに間違いがないかどうかを確認できません。自分でテストする必要があります。

于 2012-06-25T12:10:45.227 に答える
2

JQueryを使用すると、次のような要素にクラスを追加できます...

HTML：

<p id='myParagraph'>I need highlighting!</p>

JQuery：

$(document).ready(function(){
    $('#myParagraph').addClass('highlight');
});

divタグのようなものをpタグに入れることはお勧めできないので、特定のHTML要素をどこに置くことができるかを見てみましょう。

これがお役に立てば幸いです。

更新しました

さて、JQueryを使用してコードの周りにタグをラップすることができます。

タグを削除する必要がある場合は、PHPのストリップタグ機能を使用できます。これは、HTML形式を使用せずにテキスト文字列を比較するのに役立つ場合があります。明らかに、ページがブラウザに読み込まれる前に実行されます。同等のJavascriptについてはよくわかりません。

ラップを使用すると、HTMLから目的の出力に到達できます-とはいえ、HTMLの構造を真剣に検討して、可能な限り最高のものであることを確認します...作業が楽になる可能性があります。

于 2012-06-25T12:20:15.687 に答える