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

Posted

技术标签:

【中文标题】使用 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 以查看选择了哪个&lt;p&gt;

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

【讨论】:

anchorNode 不能保证是一个文本节点:它很容易成为一个元素。此外,window.getSelection()document.getSelection() 得到更广泛的支持,并且是 WHATWG 正在标准化的版本。最后,这在 IE 所以我支持你的回答! 为了向后兼容,document.getSelection() 被指定为与 window.getSelection() 执行相同的操作,因此它不会消失。

以上是关于使用 javascript 来获取围绕选择的单词和同一 <p> 元素的一部分?的主要内容,如果未能解决你的问题,请参考以下文章

在字符串中提取围绕给定搜索字符串的 X 个单词

JavaScript 获取每个单词的事件

RTF - 围绕一个词框?

JavaScript:通过双击禁用文本选择

javascript 从字符串中获取n个单词

如何使用“Twit”库从列表中选择一个随机单词