Mark.jsでページの文字列をハイライトする #JavaScript

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なんかで指定することもできますし、正規表現検索、除外機能など結構奥が深い。