如何检测document.getSelection().modify('extend', 'forward', 'word')是否到达文档末尾?



如何检测document.getSelection().modify('extend', 'forward', 'word');是否触及文档末尾?它不能分析文本(长度== 0),因为例如,一个空的<p>-Tag被认为是一个单词。我已经尝试检查范围对象的客户端矩形(并与以前的范围进行比较)。但在某些文档中,光标会"跳转"。在两个位置之间,到达文档末尾之后。所以这是不可靠的。

modify函数总是返回undefined。所以这没有用。

使用的浏览器:Microsoft Edge(在我的情况下,在这个浏览器中运行就足够了)。

示例(简化代码,非实际字代码):

let words = [];
let proceed = true;
let sel = document.getSelection();
let p = document.getElementsByTagName('p');
let range = document.createRange();
range.setStart(p[0], 0);
sel.removeAllRanges();
sel.addRange(range);
for(let i = 0; i < 100 && proceed; i++) {
sel.collapseToEnd();
sel.modify('extend', 'forward', 'word');

if(sel.rangeCount > 0)
words.push(sel.getRangeAt(0).toString());
}
console.log('Words:', words);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<p>One Two</p><p>Three Four</p><p>Six Seven</p>
</body>
</html>

在这个例子中:如何设置proceed为false,在最后一个单词?如何摆脱计数器变量i没有结束在一个无尽的循环?

有什么建议吗?

我不知道如何使用modify()实现这一点,所以我做了一个解决方案。你说你想要一个一个地选择每个单词,并检查选中的单词(如果需要的话替换它)。这样如何:首先获取页面中的所有单词,然后在循环中逐个检查它们,并在满足某些条件时替换它。

示例代码如下:这里我假设我们需要替换单词"three"。与"Zero"

function CheckAndReplace() {
var paragraphs = document.getElementsByTagName("p");
if (!paragraphs) return;
var j = 0;
while (j < paragraphs.length) {
// Parse the text into an array
var arr = paragraphs[j].innerHTML.split(" ");
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
if (arr[i] == "Three") {
var replaced = document.getElementsByTagName("p")[j].innerHTML.replace("Three", "Zero");
document.getElementsByTagName("p")[j].innerHTML = replaced;
}
}
j++
}
}
<p>One Two</p>
<p>Three Four</p>
<p>Six Seven</p>
<input type="button" onclick="CheckAndReplace();" value="Check And Replace" />

最新更新