Question

我正在尝试创建一个文本编辑器，用户可以通过突出显示/选择它来更改一些文本，然后单击一些按钮以进行删除或在其中添加新字符，因此我需要获取该特定文本

我尝试了这个window.getSelection().toString()，但是我的问题是，如果ifIi的文本包含两个或多个相同的单词，如'dont click here or here'，而用户突出显示了第二个'here'，则说我不能知道用户突出显示了这两个词中的哪一个

所以我想不按值获取突出显示的字符串，或者我不知道如何解决此问题 ps。我要创建的文本编辑器类似于我在上面写这个问题的编辑器

edit：我的问题不是我要删除一些字符串，我的问题不是我想获取文本而不是文本的值，所以当我写11111111111并仅突出显示1中的一个时，我可以确切知道哪一个突出显示

Answer 1

我刚刚使用getSelection()方法进行了测试，您可以使用baseOffset和focusOffset属性来确定位置。 BaseOffset 计数并返回选择开始的字符数， FocusOffset 计数并返回选择结束的字符数。

这里是一个例子：

function getHighLightText() {
   let text = window.getSelection().toString();
   console.log(text); // log selected text
   //console.log(window.getSelection()); // log getSelection
   console.log(window.getSelection().baseOffset + ' - ' + window.getSelection().focusOffset); // log selection start & end offset.
}

document.onselectionchange = getHighLightText;

<p id="p">111111111</p>

`

注意：未经大文本测试。

Answer 2

您可以使用getRangeAt()

获取所选文本的位置

演示：

function getSel(el) {
  console.clear();
  var selObj = window.getSelection();
  var selection = selObj.toString();
  console.log(`Selected: ${selection}`);
  var selRange = selObj.getRangeAt(0);
  console.log(`from: ${selRange.startOffset}\nto: ${selRange.endOffset}`);
  console.log(el.textContent);
  el.textContent = `${el.textContent.substr(0, selRange.startOffset)} ***${el.textContent.substr(selRange.endOffset)}`;
};

<div onmouseup="getSel(this)">Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

获取突出显示的文本而不是突出显示的文本值

2 个答案: