mark.jsで特定文字だけマーカーを使ったようにハイライト表示させる。

2020年4月6日

GitHubのソースはこちら。

特定文字をハイライトしようとしたけど、直感的にやるとエラーが出た

今回はCDNでサクッと使い方を確認していく。
確認用のhtmlは以下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    <div class="mark-target"><p>ちょっとしたテストをやる。</p></div>
    <!-- <div class="mark-target">意図はわからないかもしれないが、ちょっとした実験なのだ。</div> -->
</body>
<style>
    .highlight{
        background: yellow;
        color: black;
    }
    </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.es6.js" integrity="sha256-SdKdehpVMNuMILam0NBdFlGPHhvLrjjl//RBsRLNMPI=" crossorigin="anonymous"></script>
<script>
    let contexts = document.getElementsByClassName("mark-target");
    let instance = new Mark(contexts);
    instance.mark("テスト", {
    "element": "span",
    "className": "highlight"
});
</script>
</html>

まずは失敗例。
フィーリングでやってるとエラーがでる。
ちゃんとドキュメント読まないとね。

エラーの内容は

Failed to execute ‘createNodeIterator’ on ‘Document’: parameter 1 is not of type ‘Node’.

中身を見てみると、Collectionになっている。

解決策

以下のようにすると解消する。

let instance = new Mark(contexts[0]);

つまり、要素のコレクションはだめで、個別のコレクションとするとうまくいく。
実際に表示してみると、こんな感じになる。

JavaScriptJavaScript

Posted by takumioda