回答編集履歴
2
Range.surroundContents() の手法を追記
answer
CHANGED
|
@@ -19,4 +19,13 @@
|
|
|
19
19
|
|
|
20
20
|
HTMLのソースを事前に変更できない場合は別の手段が必要で、けっこう面倒です。
|
|
21
21
|
とくに、`<p>ほげ <math>.. <span>.</math></span> ほげ</span></p>` のように開始地点と終了地点が別の要素に入っているケースもサポートするとかなり手間がかかります。
|
|
22
|
+
そうではない場合は、
|
|
23
|
+
[`TreeWalker`](https://developer.mozilla.org/ja/docs/Web/API/TreeWalker)などですべての`Text`ノードを先頭から処理し、
|
|
24
|
+
`Text`ノードの中からマークしたい文字列を検索、
|
|
25
|
+
マークしたい文字列の先頭の`Text`ノードとオフセットを記録、
|
|
26
|
+
マークしたい文字列の最後の`Text`ノードとオフセットを記録、
|
|
27
|
+
それらの情報で`Range`オブジェクトを作り、[`Range.surroundContents()`](https://developer.mozilla.org/en-US/docs/Web/API/Range/surroundContents) で `<mark>`で囲む
|
|
22
28
|
|
|
29
|
+
以上で可能かと思います。
|
|
30
|
+
|
|
31
|
+
|
1
.
answer
CHANGED
|
@@ -15,4 +15,8 @@
|
|
|
15
15
|
</script>
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
+
----
|
|
19
|
+
|
|
18
20
|
HTMLのソースを事前に変更できない場合は別の手段が必要で、けっこう面倒です。
|
|
21
|
+
とくに、`<p>ほげ <math>.. <span>.</math></span> ほげ</span></p>` のように開始地点と終了地点が別の要素に入っているケースもサポートするとかなり手間がかかります。
|
|
22
|
+
|