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

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);
  }
});

注意:https://stackoverflow.com/a/24691115/14058876
方法は次のとおりです.

で選択したテキストをインポートします.

テキストにラベル(span)を付けて、指定した変数を作成します.

選択でrangeを作成し、既存のコンテンツを削除し、2番目に作成したコンテンツを入れます.

このメソッドには次の問題があります.

では、ハイライトされたテキストを区別する「キー」がないため、保存して取り出すことはできません.つまり、リフレッシュ後は再インポートできません.

は単純な代替選択の形式であるため,従来のhtmlは破壊される.

したがって、テキストをどのように区別するか、テキストをどのように区別するか.
区別されたキーの入力/保存/出力方法をよく考慮する必要があります.

読み物

replaceを使用してタグを挿入するには