[JS] HTML文字列の一部を置換する際に対象からタグ部分を除外する方法
説明
「[JS]リアルタイムにページ内検索をしてハイライト表示する」のようにHTML文字列の一部を動的に置換したい時の話。
例えば以下のようなHTMLがあったとする。
この文章中のsampleのみを太字にしたいと考え、以下のようにsampleという文字列をspanタグで囲む処理を行う。
すると当然「class="sample"」の部分も置換され、望んだ結果を得ることが出来ない。 テキストノードのみを対象としてHTML文字列の置換を行う際には以下のようにすると上手くいく。
結果
sample文章があります。
sampleという文字だけ太字にしてみましょう。