Html 从window.getSelection（）获取整个字符串

我正在使用

window.getSelection（）

从页面上的一个容器返回突出显示的文本。它返回正确的字符串，但是，我也希望在用户按backspace时删除突出显示的文本。这不会是一个问题，但是，在重复字符串的情况下，目前不可能知道要删除哪种情况。我如何解决这个问题

从“React”导入React；
常量值=[“a”、“b”、“c”、“a”、“b”、“c”]；
const handleMouseUp=e=>{
const selection=window.getSelection（）；
const highlightedText=selection.toString（）；
console.log（highlightedText）；
//如何识别文本的索引？
};
导出默认函数App（）{
返回(
handleMouseUp（e）}>
{values.map（val=>(
{val}
))}
);
}

---

例如，如果要突出显示最后一个子字符串，它只会返回

abc

，但我希望它告诉我这个特定子字符串的索引信息。

返回一个对象

通过

Selection.getRangeAt（0）

，您可以获得一个对象，该对象具有属性和，可用于标识所选文本

var selRange = window.getSelection().getRangeAt(0);
var selStart = selRange.startOffset; 
var selEnd = selRange.endOffset; 

更新

• 返回一个数字，该数字表示

  Range.startContainer

  范围

  开始
  
  返回一个数字，表示在
  范围.endContainer
  中
  范围
  结束
  

代码生成一系列

var

元素，每个元素包含单个字符的文本。因此，我们必须考虑<代码> Real.StestCult和 Real.Entgult，这使得解决方案看起来稍微复杂一些。p> 请查看以下内容。

返回一个对象

通过

Selection.getRangeAt（0）

，您可以获得一个对象，该对象具有属性和，可用于标识所选文本

var selRange = window.getSelection().getRangeAt(0);
var selStart = selRange.startOffset; 
var selEnd = selRange.endOffset; 

更新

• 返回一个数字，该数字表示

  Range.startContainer

  范围

  开始
  
  返回一个数字，表示在
  范围.endContainer
  中
  范围
  结束
  

代码生成一系列

var

元素，每个元素包含单个字符的文本。因此，我们必须考虑<代码> Real.StestCult和 Real.Entgult，这使得解决方案看起来稍微复杂一些。p> 请查看以下内容。

从“React”导入React；
常量值=[“a”、“b”、“c”、“a”、“b”]；
常量handleMouseUp=e1=>{
const selection=document.getSelection（）；
if（selection.toString（）！=“”）{
window.addEventListener（“向下键”，e2=>{
console.log（e2.key）；
if（e2.key==“退格”）{
selection.deleteFromDocument（）；
}
});
}
};
导出默认函数App（）{
返回(
handleMouseUp（e）}>
{values.map（val=>(
{val}
))}
);
}

这对我很有效，有一个

selection.deleteFromDocument（）

函数删除当前选择的DOM。

从“React”导入React；
常量值=[“a”、“b”、“c”、“a”、“b”]；
常量handleMouseUp=e1=>{
const selection=document.getSelection（）；
if（selection.toString（）！=“”）{
window.addEventListener（“向下键”，e2=>{
console.log（e2.key）；
if（e2.key==“退格”）{
selection.deleteFromDocument（）；
}
});
}
};
导出默认函数App（）{
返回(
handleMouseUp（e）}>
{values.map（val=>(
{val}
))}
);
}

这对我来说很有效，有一个

selection.deleteFromDocument（）

函数删除当前选择的DOM。

window.getSelection（）返回带有高位文本的对象

var selObj  

if(window.getSelection()){
//do something
selObj=window.getSelection()
return selObj
}
if(window.getSelection().empty){
selObj={}
}

getSelection（）返回带有高位文本的对象

var selObj  

if(window.getSelection()){
//do something
selObj=window.getSelection()
return selObj
}
if(window.getSelection().empty){
selObj={}
}

---

我想确定高亮文本相对于整个字符串的索引。例如，如果我的字符串是'abcabc'，用户突出显示第二个'abc'子字符串，我想知道这个子字符串在整个字符串的上下文中从哪个索引开始，因此，在本例中，它将是第4个字符，直到第6个。@complementyy:

startOffset

对应于第一个选定字符的索引，而

endOffset-1

是最后一个选定字符的索引。我没有从这些值中获得任何索引信息。即使我在输入中突出显示一个长字符串，它们也只能是0或1。你能给我一个沙盒的例子，用你的解决方案复制我正在尝试做的事情吗？@complexityy：在我注意到每个字符都包装在

var

元素中后，我用相应的新解决方案更新了我的答案。我想确定相对于整个字符串的高亮文本的索引。例如，如果我的字符串是'abcabc'，用户突出显示第二个'abc'子字符串，我想知道这个子字符串在整个字符串的上下文中从哪个索引开始，因此，在本例中，它将是第4个字符，直到第6个。@complementyy:

startOffset

对应于第一个选定字符的索引，而

endOffset-1

是最后一个选定字符的索引。我没有从这些值中获得任何索引信息。即使我在输入中突出显示一个长字符串，它们也只能是0或1。你能给我一个沙盒的例子，用你的解决方案复制我正在尝试做的事情吗？@complexityy：当我注意到每个字符都被包装在

var

元素中后，我用相应的新解决方案更新了我的答案。这个解决方案很好，但并不完全满足我的需要。我试图确定突出显示的子字符串的索引范围，以便我可以用它做其他事情，而不是简单地删除文档中选择的任何内容