機能 ショートカットキー
リファレンス(参考URL)一覧へ移動 R
記事URLをMarkDownとしてコピー Ctrl+M
前のコードタグへ移動 Ctrl+←
次のコードタグへ移動 Ctrl+→
ヘルプを表示・非表示 H
Tips
- ショートカットキーは記事上で有効です。ヘッダー/フッター付近では機能しないことがあります。
- コードタグ移動機能がうまく動かないときは、Shift+F5でページを更新してみてください。
- このウィンドウを閉じるには、Hキーをもう一度押してください

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

この記事で欲しい情報が見つからなかった方へ

この記事の更新情報がある場合があります。
この記事は以下の記事とも関連性があると思われます。

ごめんなさい!この記事には関連記事が1つも見つかりませんでした。

管理人の方針で、既存の記事の編集はせず、新しい情報や大きな既存情報の更新があった場合には、新しい記事として公開することになっています。
当記事で欲しい情報が見つからなかった・解決に至らなかった場合、これらのリンクがお役に立てるかも知れません。

どうやってこの関連記事を生成しているの?
この機能のPHPソースコード(2500行)

コメントを残す

Close Menu