更新

Question

我正在尝试获取所选文本的位置，用一些HTML替换它然后我想要保留所选文本的位置，以便下次我渲染html时我想在选定的文字

我在Div中显示了一些内容

现在我选择文本“De finibus的扰乱部分”，它位于第2行并且从开始的某个偏移处开始。我将此文本替换为文本周围的范围，如：

function textSelection() {
  var sel = window.getSelection();
  var range = sel.getRangeAt(0).cloneRange();
  var markerTextChar = range.extractContents();

  var markerEl, markerId = "sel_" + new Date().getTime() + "_" + Math.random().toString().substr(2);
  markerEl = document.createElement("span");
  markerEl.id = markerId;

  markerEl.appendChild(markerTextChar);

  range.insertNode(markerEl);

  markerEl.style.backgroundColor = ' rgba(246,195,66,0.3)';
  markerEl.style.cursor = 'pointer';

}

<div id='page-view' onmouseup='textSelection()'> In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with placeholder text allows designers to design the
  form of the content before the content itself has been produced. The lorem ipsum text is typically a scrambled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed to make it nonsensical,
  improper Latin.
</div>

现在我在此范围中添加样式以突出显示所选内容。现在我要做的是保存这个位置，以便下次显示html页面时，我想突出显示相同的选择。请注意，在某些其他位置可能会重复相同的选定文本，因此我不想无意中突出显示错误的位置。

我有办法实现这个目标吗？
包含Div的文字没有“contenteditable”属性
到目前为止我所拥有的是获取所选文本的'clientRects'并创建div并为该div添加样式并附加到正文，但我不想这样做
使用标记语言解析器（如MarkDown）在后端生成实际文本的HTML

编辑：

让我添加更多细节。像github wiki一样，我通过解析内容并根据选定的语言模式（如Markdown / Textile）生成html来显示wiki的内容。我想要一种方法以某种方式将所选文本映射到编辑页面时的实际文本行号。单击页面编辑时，将使用codemirror代码编辑器显示内容。

由于

Answer 1

首先，您必须获取div的内容，然后才能使用indexOf获取所选文本的位置。在span中包装所选文本之前执行此操作。现在，您将获得所选文本的索引和长度，以及可以随时重建选择的信息。

＆＃13;

// extract page content first because content will be changed after a few selection.
var page_content = document.getElementById('page-view').innerText;

function textSelection() {
  var sel = window.getSelection();
  var range = sel.getRangeAt(0).cloneRange();
  var markerTextChar = range.extractContents();

  var selectedIndex = page_content.indexOf(markerTextChar.textContent);
  console.log("selected from ", selectedIndex, "length: ", markerTextChar.textContent.length)
  var markerEl, markerId = "sel_" + new Date().getTime() + "_" + Math.random().toString().substr(2);
  markerEl = document.createElement("span");
  markerEl.id = markerId;

  markerEl.appendChild(markerTextChar);

  range.insertNode(markerEl);

  markerEl.style.backgroundColor = ' rgba(246,195,66,0.3)';
  markerEl.style.cursor = 'pointer';

}

＆＃13;

<div id='page-view' onmouseup='textSelection()'> In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with placeholder text allows designers to design the
  form of the content before the content itself has been produced. The lorem ipsum text is typically a scrambled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed to make it nonsensical,
  improper Latin.
  
  demonstrate the textual
</div>

＆＃13;

Answer 2

您还可以从选择范围range.startOffset和range.endOffset中提取信息。

更新

您可以将所选元素作为参数传递，然后从那里，您将知道使用了哪个节点。方便，只需为允许用户选择的每个元素设置唯一ID。

＆＃13;

// extract page content first because content will be changed after a few selection.
var page_content = document.getElementById('page-view').innerText;

function textSelection(element) {
  console.log('selected on', element.id);
  var sel = window.getSelection();
  //console.log(sel);
  var range = sel.getRangeAt(0).cloneRange();
  console.log("from", range.startOffset, "to", range.endOffset);
  var markerTextChar = range.extractContents();

  var markerEl, markerId = "sel_" + new Date().getTime() + "_" + Math.random().toString().substr(2);
  markerEl = document.createElement("span");
  markerEl.id = markerId;

  markerEl.appendChild(markerTextChar);

  range.insertNode(markerEl);

  markerEl.style.backgroundColor = ' rgba(246,195,66,0.3)';
  markerEl.style.cursor = 'pointer';

}

＆＃13;

<div id='page-view' onmouseup='textSelection(this)'> In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with placeholder text allows designers to design the
  form of the content before the content itself has been produced. The lorem ipsum text is typically a scrambled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed to make it nonsensical,
  improper Latin. demonstrate the textual
</div>

＆＃13;

获取div中的选定文本位置并保留

2 个答案:

更新