javascript - Microsoft Word のように JavaScript を使用して HTML テキストを強調表示する

Question

JavaScriptを使用してhtmlテキストを強調表示するための次のコードがあります。

var counter = 1;
function BindEventForHighlight() {
   $('#ParaFontSize').bind("mouseup", HighlightText);
   $('#ParaFontSize').unbind("mouseup", RemoveHighlight);
}


function UnBindHighlightEvent() {
   $('#ParaFontSize').bind("mouseup", RemoveHighlight);
   $('#ParaFontSize').unbind("mouseup", HighlightText);
}


function HighlightText() {

   var text = window.getSelection();
   var start = text.anchorOffset;
   var end = text.focusOffset - text.anchorOffset; 

   range = window.getSelection().getRangeAt(0);
   range1 = window.getSelection().toString();
   var selectionContents = range.extractContents();
   var span = document.createElement("span");

   span.appendChild(selectionContents);

   span.setAttribute("id", counter);
   span.setAttribute("class", "highlight");
   range.insertNode(span);
   counter++;

}

function RemoveAllHighlights() {
  var selection = document.getElementById('ParaFontSize');
  var spans = selection.getElementsByTagName("span");
  for (var i = 0; i < spans.length; i++) {
      spans[i].className = ""; 
  }
}

function RemoveHighlight() {
   var selection = window.getSelection();
  if (selection.toString() !== "" &&
           selection.anchorNode.parentNode.nodeName === "SPAN") {
     selection.anchorNode.parentNode.className = "";
  }
  else {
     return false;
  }
}

HighlightText 関数は、範囲オブジェクトを使用してテキストを強調表示します。選択したテキストの開始と終了をデータベースに保存したいのですが、ユーザーが同じページに戻ると、前回から強調表示されたテキストが表示されます。また、次のような他のシナリオが必要です。

1. ユーザーがテキストを強調表示すると、この強調表示されたテキストのすべてまたは一部の強調表示を解除し、残りのテキストを強調表示したままにすることができます。

2. ユーザーは、ページ内の強調表示されたすべてのテキストをクリアできます。

この蛍光ペンを MS Word の蛍光ペンとして機能させたいとしましょう。

よろしくお願いします。