特定の文字列で囲まれた範囲をmark（黄色マーカー）したいです

Question

下記の様に<math></math>で囲まれた文字列があったときに，囲まれた全ての文字列を黄色マーカーで強調したいです。
※ブラウザ画面上にはタグの状態で表示する想定です。

<math><mstyle displaystyle="true"><mi>v</mi></mstyle></math>

HTMLで以下のようにボタンを設置し，mark()を実行すると，黄色マーカーで強調できるようにしたいです。

<button onclick="mark()">mathマーク</button>

jsでmark()を記述しようとしているのですが，どの様に書けばいいでしょうか？

function mark() {
  }

なにかいい方法があれば教えて下さい。

Comments

[int32_t]

<p>ほげ &lt;math>...&lt;/math> ほげ</p>

のような入力で

<p>ほげ <mark>&lt;math>...&lt;/math></mark> ほげ</p>

のような結果を得たい、という要望で合ってますか。

[mizuno12]

はい。合っています。

Answer 1

こういうケースでは、HTMLのソースであらかじめ「後でマークされるテキスト」を区別できるようにしておいて、ボタンが押されたらスタイルだけ変更するのが簡単です。

<p>ほげ <span class="will-be-marked">&lt;math>...&lt;/math></span> ほげ</p>
<style>
.marked {
  background-color: Mark;
  color: MarkText;
}
</style>
<script>
function mark() {
  // querySelectorAll('.will-be-marked') のそれぞれに対して、
  // classList.add('marked') を実行する
}
</script>

---

HTMLのソースを事前に変更できない場合は別の手段が必要で、けっこう面倒です。
とくに、<p>ほげ &lt;math>.. <span>.&lt;/math></span> ほげ</span></p> のように開始地点と終了地点が別の要素に入っているケースもサポートするとかなり手間がかかります。
そうではない場合は、
TreeWalkerなどですべてのTextノードを先頭から処理し、
Textノードの中からマークしたい文字列を検索、
マークしたい文字列の先頭のTextノードとオフセットを記録、
マークしたい文字列の最後のTextノードとオフセットを記録、
それらの情報でRangeオブジェクトを作り、Range.surroundContents() で <mark>で囲む

以上で可能かと思います。

Comments

[mizuno12]

ありがとうございました。HTMLソースを事前に変更できない状況なので，なにか良い方法がないか考えてみます。

[int32_t]

<math>と</math>の間にHTMLのタグが入ることはありますか?

[mizuno12]

それはないです。

[int32_t]

> それはないです。

その条件での解決方法を回答に追記しました。