javascript - 想要获取文本（内容）的开始和结束索引

Question

我想使用 selectNodeContents() 或 document.createRange() 从整个内容中获取所选文本（内容）的开始和结束索引。

我努力了

<div id="parent">
 Hello everyone! <p id="demo_text">This is my home page</p>
</div>

var node = document.getElementById('demo_text');
var range = document.createRange();    
range.selectNodeContents(node);

我想，

startIndex = 16 // starting index of "This" from "Hello everyone! This is my home page"
endIndex = 35 // end index of "page" from "Hello everyone! This is my home page"

标签： javascript

Answer 1

如果您实际上只是在寻找索引，您可以.innerText结合使用String.prototype.indexOf()来定位您的子元素innerText在父元素中的位置innerText，这将返回起始索引。然后可以通过添加子字符串的长度来计算结束索引。

const node = document.getElementById('demo_text');
const parent = document.getElementById('parent');

const startIndex = parent.innerText.indexOf(node.innerText);
const endIndex = startIndex+node.innerText.length-1;

console.log('startIndex: ', startIndex);
console.log('endIndex: ', endIndex);

console.log(parent.innerText[startIndex]);
console.log(parent.innerText[endIndex]);

<div id="parent">
 Hello everyone! <p id="demo_text">This is my home page</p>
</div>

但是，如果您要选择字符串，则需要使用创建新Selection对象window.getSelection()并将已创建的范围添加到其中。MDN 上的示例

// Clear any current selection
const selection = window.getSelection();
selection.removeAllRanges();

const node = document.getElementById('demo_text');
const range = document.createRange();   
range.selectNodeContents(node);

// Add the range to the empty selection
selection.addRange(range);

::-moz-selection {
  background: pink;
}

::selection {
  background: pink;
}

<div id="parent">
 Hello everyone! <p id="demo_text">This is my home page</p>
</div>