mark.jsで特定文字だけマーカーを使ったようにハイライト表示させる。
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]);
つまり、要素のコレクションはだめで、個別のコレクションとするとうまくいく。
実際に表示してみると、こんな感じになる。
ディスカッション
コメント一覧
まだ、コメントがありません