[TIL 2021.10.25]JS選択文字列をハイライト表示

7072 ワード

テキストリンク

Today I Learend
選択した文字列を強調表示

<ul class="generic-list">
    <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</li>
    <li class="item">Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</li>
    <li class="item">Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</li>
    <li class="item">Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</li>
</ul>

たとえば、上記のテキストがある場合、liの最初の単語をドラッグしてoffsetをチェックします.これらはゼロから始まります.
ハイライトされたテキストをバックエンドから正確にインポートするには、それを区切ってください.
ハイライト表示は、ドラッグした選択でstyleを与えるだけです.

document.addEventListener("mouseup", (event) => {
  if (window.getSelection().toString().length) {

    // -- 1 -- //
    let selection = window.getSelection();
    let exactText = selection.toString();

    // -- 2 -- //
    let span = document.createElement("SPAN");
    span.textContent = exactText;

    // -- 3 -- //
    let range = selection.getRangeAt(0);
    range.deleteContents();
    range.insertNode(span);
  }
});