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



お困りですか?この記事で紹介していることをマンツーマンで指導、解説、代行します。まずはお気軽にお問い合わせください。


Close Menu