检索所选文本的html代码

Retrieve html code of selected text

本文关键字：html 代码 文本 检索      更新时间：2023-09-26

在mozilla中，我可以选择一个文本并使用contentWindow.getSelection（）打印所选文本。但我正在尝试获取该所选文本的底层html代码块。有什么办法我可以取回它吗？

我需要在用户选择的任何可点击文本下面提取url和其他信息，比如src等。我需要它的父节点的代码块。

谢谢。

检索HTML应该相对容易，但这取决于您想要什么。window.getSelection()返回一个选择对象。您可以使用：

  • CCD_ 2以获得选择开始的节点
  • window.getSelection().focusNode以获取选择结束的节点

例如：

let selection = contentWindow.getSelection();
let firstElement = selection.anchorNode;
let lastElement = selection.focusNode;

一旦你有了节点/元素，你会做什么取决于你真正想要找到的是什么。您还没有指定，所以通过找到这些节点来操纵它只是猜测您想要什么。例如，您可能只想找到anchorNode的父级，验证它是否包含focusNode（firstElement.parentNode.contains(lastElement)）（如果没有，则继续查找下一个父级，直到它包含为止），并使用父级的innerHTML。或者，您可能想找到包含focusNode的anchorNode的第一个父元素，然后使用TreeWalker遍历DOM树，直到找到anchorNode，并开始累积HTML，直到遇到focusNode。

在执行contentWindow.getSelection之前，您是否有鼠标事件监听器或其他东西？

如果您这样做，您可以通过执行以下操作获得所选节点：

    function onMouseUp(event) {
        var aWindow = event.target.ownerDocument.defaultView;
        // should test if aWindow is chrome area or actually content area
var contentWindow = aWindow.document instanceof Ci.nsIHTMLDocument ? aWindow : null; // i guessed here but testing if its content window is done in some similar way
if (!contentWindow) { return }
        // do contentWindow.getSelection im not familiar with the code, if selection exists // check if more then one range selected then get node for each, however im going to assume only one range is selected
        var nodeOfFirstRange = event.explicitOriginalTarget
        var elementOfNode = nodeOfFirstRange.parentNode;
        var htmlOfElement = elementOfNode.innerHTML;
    }
    Services.wm.getMostRecentWindow('navigator:browser').gBrowser.addEventListener('mouseup');

这个代码的问题是，如果用户在内容窗口中向下鼠标，然后高亮显示并向上鼠标，而鼠标在内容窗口之外，比如在chrome窗口上，甚至在浏览器之外（比如浏览器窗口没有达到最大值，或者用户在操作系统任务栏中使用鼠标dup等），那么只需将这个代码用作的指南即可

相关文章：