问题
在网页上选中文本,然后获取选中文本的所有 DOM 块元素。
解决
var selection = window.getSelection();
var range = selection.getRangeAt(0);
var allWithinRangeParent = range.commonAncestorContainer.getElementsByTagName("*");
var allSelected = [];
for (var i=0, el; el = allWithinRangeParent[i]; i++) {
// The second parameter says to include the element
// even if it's not fully selected
if (selection.containsNode(el, true) ) {
allSelected.push(el);
}
}
console.log('All selected =', allSelected);
function getSelectedBlockElements() {
const selection = window.getSelection();
if (selection.rangeCount === 0) return [];
const range = selection.getRangeAt(0);
const startContainer = range.startContainer;
const endContainer = range.endContainer;
const startElement = startContainer.nodeType === 3 ? startContainer.parentElement : startContainer;
const endElement = endContainer.nodeType === 3 ? endContainer.parentElement : endContainer;
const commonAncestor = range.commonAncestorContainer;
const commonAncestorElement = commonAncestor.nodeType === 3 ? commonAncestor.parentElement : commonAncestor;
const startElementParents = [startElement];
let startElementParent = startElement.parentElement;
while (startElementParent !== commonAncestorElement) {
startElementParents.push(startElementParent);
startElementParent = startElementParent.parentElement;
}
const endElementParents = [endElement];
let endElementParent = endElement.parentElement;
while (endElementParent !== commonAncestorElement) {
endElementParents.push(endElementParent);
endElementParent = endElementParent.parentElement;
}
const blockElements = [];
let startElementParentsIndex = 0;
let endElementParentsIndex = 0;
let startElementParentElement = startElementParents[startElementParentsIndex];
let endElementParentElement = endElementParents[endElementParentsIndex];
while (startElementParentElement !== endElementParentElement) {
blockElements.push(startElementParentElement);
startElementParentsIndex++;
startElementParentElement = startElementParents[startElementParentsIndex];
}
blockElements.push(startElementParentElement);
return blockElements;
}
后记
上一篇
解决 Docker 错误:'OSError: cannot nz84i shared object file: No such file or directory'
在 macOS M1 芯片上运行 Docker 时,遇到错误'OSError: /root/.cache/pypoetry/virtualenvs/chatbot-twitter-9TtSrW0h-py3.11/lib/python3.11/site-packages/tls_client/dependencies/tls-client-amd64.so: cannot nz84i shared object file: No such file or directory'。该错误是因为使用了错误的架构。解决方法是在 Dockerfile 中指定 `--platform=amd64` 来使用 amd64 镜像。
下一篇
JS 监听选中文本事件
本文介绍如何使用 JavaScript 监听网页选中文本事件,包括 `selectionchange`、`mouseup`、`touchstart`和`touchend` 事件的用法和优缺点,并提供了相应的代码示例。