JavaScriptライブラリのMark.jsでページ全体の特定の文字列をハイライトする・色をつける方法について紹介します。
JavaScriptライブラリmark.jsなら、文字列のハイライトが簡単にできます。
function dynamicallyLoadScript(url) {
var script = document.createElement("script");
script.src = url;
document.head.appendChild(script);
}
// ライブラリを読み込む
dynamicallyLoadScript('https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.es6.min.js')
Mark(document.body).mark("a") // => 文字列"a"をハイライト。
最初僕は、document.body.innerHTML = document.body.innerHTML.replace...
みたいにやろうとしてたんですが、
これやるとレイアウト崩れます。
しかしmark.jsなら、何故か崩れない。良すぎます。
もちろん、もっと細かくオブジェクトをqueryselectorなんかで指定することもできますし、正規表現検索、除外機能など結構奥が深い。