[TIL 2021.10.26] Web API Selection

Today I Learned
必要な機能は、まずAPIドキュメントを表示することです.
ハイライト表示するには、各位置に一意の値を設定する必要があります.
Serialization
オブジェクトまたはデータ構造を、ネットワークまたはストレージを介して伝送するのに適したフォーマットに変換するプロセス.
例えば、JavaScriptでJSON.stringby()を使用して、オブジェクトをJSON stringにシーケンス化できます.
Local storage
ローカルストレージは、キー値としてデータを格納するリポジトリです.
ローカルストレージに位置情報を格納する必要があります.ブラウザを閉じても、ハイライトを残します.
HTML内のテキストの位置を一意にするには、複数の要素を統合する必要があります.
参考のweb-highlighterでは、この点を区別するために、いろいろな種類を持ってきたようです.

parent tag name

parent index

end and start textOffset

uuid

選択テキスト文字列

今日は1番と2番を覚えました.
selection APIでparentElementのインポート方法を検索し、うろうろします.
最終的に悟ったのは,MDNで関数をざっと見て,何が一番速いかを考えることである.

document.addEventListener("mouseup", (event) => {
  if (document.getSelection().toString().length) {
    let selection = document.getSelection();
    let exactText = selection.toString();

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

    let range = selection.getRangeAt(0);
    range.deleteContents();
    range.insertNode(span);

    let parentElement = selection.anchorNode.parentElement;

    let listByTagName = document.getElementsByTagName(parentElement.tagName);

    let indexOfTags = 0;
    for (let i = 0; i < listByTagName.length; i++) {
      if (parentElement === listByTagName[i]) {
        indexOfTags = i;
      }
    }

    console.log(parentElement.tagName, indexOfTags);
  }
});

いずれにしても、選択した関数によって、最終的にアクセスできます.
タグが必要なインデックスは、同じ親要素内に同じタグが複数あるため区別できません.
start and end offsetと実際のハイライトテキストを加えると、完全に固有の値になります.
この一意のロケーション値をローカルストレージに格納するか、Chrome Extensionとして作成すると、各ページのURL情報を同時に含めることができます.