使用 javascript 来获取围绕选择的单词和同一 <p> 元素的一部分？

Posted 2023-03-06

【中文标题】使用 javascript 来获取围绕选择的单词和同一 <p> 元素的一部分？

【英文标题】：Use javascript to grab the words surrounding a selection and part of the same <p> element?

【发布时间】：2011-06-26 13:39:43

【问题描述】：

我正在寻找创建一个书签，它采用选定的单词和同一段落元素中的其他单词，对它们进行编码，然后将它们发送到我的服务器。

例如，考虑以下情况：

<p>The quick brown fox jumped over the fence.</p>

如果用户选择“jumped”（通过突出显示它）并单击小书签，我希望将“jumped”作为一个编码字符串发送，并将“The quick brown fox jumped over the fence”作为一个附加编码字符串发送。

这是我到目前为止所得到的。 getSelection 函数将“跳转”发送到我的服务：

javascript:location.href='http://www.myservice.com/new.php?'+'url_def='+encodeURIComponent(getSelection())

为了将段落元素中的附加文本添加到我的服务中，我可以附加什么内容？

【问题讨论】：

这可能会有所帮助：Getting document selections 重新获取页面上的元素选择。从这里，您可以找到所选内容的父元素并获取其文本值。

【参考方案1】：

您所拥有的在 IE 中不起作用，它具有不同的机制来获取选择。如果你想要的是包含整个选择的元素文本，你可以这样做，这将适用于所有主要浏览器。

示例：http://jsfiddle.net/timdown/X7n5R/

代码：

function getSelectedText() 
    var selectedText = "", containerText = "";
    if (typeof window.getSelection != "undefined") 
        var sel = window.getSelection();
        if (sel.rangeCount) 
            var range = sel.getRangeAt(0);
            selectedText = range.toString();
            var container = range.commonAncestorContainer;
            if (container.nodeType == 3) 
                container = container.parentNode;
            
            containerText = container.textContent;
        
     else if (typeof document.selection != "undefined" && document.selection.type != "Control") 
        var textRange = document.selection.createRange();
        selectedText = textRange.text;
        containerText = textRange.parentElement().innerText;
    
    return 
        selectedText: selectedText,
        containerText: containerText
    ;

【参考方案2】：

您可以使用document.getSelection() 并检查anchorNode 以查看选择了哪个<p>。

所以这将引用“环绕文本”：document.getSelection().anchorNode.parentNode.innerhtml

【讨论】：

anchorNode 不能保证是一个文本节点：它很容易成为一个元素。此外，window.getSelection() 比 document.getSelection() 得到更广泛的支持，并且是 WHATWG 正在标准化的版本。最后，这在 IE

所以我支持你的回答！

为了向后兼容，document.getSelection() 被指定为与 window.getSelection() 执行相同的操作，因此它不会消失。