Fatal编程技术网
  • javascript/
  • 如何获取选定的文本，但我可以在javascript中获取周围的上下文吗？

如何获取选定的文本，但我可以在javascript中获取周围的上下文吗？

javascript

如何获取选定的文本，但我可以在javascript中获取周围的上下文吗？,javascript,selectedtext,Javascript,Selectedtext,我能够抓取用户在网页上选择的文本， 使用此代码： function getSelected() { var userSelection; if (window.getSelection) { selection = window.getSelection(); } else if (document.selection) { selection = document.selection.createRange(); } } 我能把这些话传遍全世界吗 选

我能够抓取用户在网页上选择的文本， 使用此代码：

function getSelected() {
  var userSelection;
  if (window.getSelection) {
      selection = window.getSelection();
  } else if (document.selection) {
      selection = document.selection.createRange();
  }

}
我能把这些话传遍全世界吗 选定的单词

以这些句子为例：“如果你需要 framglubble的zartbox，那么你应该买红色的小部件。 否则，您可以购买蓝色小部件并节省一些钱。”

我的代码将告诉我此人是否选择了单词“widget”。 但我想知道选择是在“红色”还是“蓝色”之后。是 这可能吗？我一直在网上搜寻一些建议 我很难找到答案

感谢您的帮助

我已经编写了快速脚本，可以在同一DIV元素中识别选择前和选择后的零件

但是，如果同一个DIV多次包含同一个单词，而您只选择了该单词，那么我编写的当前代码无法识别它是第一个还是第二个选定的单词，因此它将无法满足您的需求

无论如何，您可以在这里查看/复制/测试代码：只需选择一些内容并查看出现的警报

如果它毕竟满足了你的需求，那么很好，接受这个答案，继续前进。。。否则我需要知道：我们是否可以假设用户只选择整个单词，只选择一个单词？如果答案是肯定的，我确实知道如何解决这个问题。

在非IE浏览器中实现这一点的方法是从浏览器中获取对象。该范围有一个开始边界和结束边界，该范围的每个边界表示为节点内的偏移量；如果边界位于文本节点内，则此偏移将是字符偏移

例如，如果以下内容是文本节点，且选择由管道分隔：

"red |widget| blue widget"
。。。然后，从选择中获得的范围在文本节点内的起始偏移量为4

以下内容将为您提供表示所选内容的范围，并提醒开始边界：

var sel = window.getSelection();
var selectedRange = sel.rangeCount ? sel.getRangeAt(0) : null;
if (range) {
    alert("Offset " + selectedRange.startOffset
        + " in node " + selectedRange.startContainer.nodeName);
}
可以将范围与其他范围进行比较，因此，如果您想知道（例如）当前选择是否位于上述文本节点中“蓝色”一词之后，可以创建一个包含“蓝色”一词的范围，并将其与所选范围进行比较：

// Assume the text node is stored in a variable called textNode
var blueRange = document.createRange();
blueRange.setStart(textNode, 11);
blueRange.setEnd(textNode, 15);

var selectionIsAfterBlue =
   (selectedRange.compareBoundaryPoints(Range.END_TO_START, blueRange) == 1);
在IE中，这一切都不起作用，而且每件事都是以不同的方式完成的，通常难度要大得多。要将其规范化为单个一致接口，您可以使用my library。

IE具有
move
方法集，这将此问题减少到仅几行，以向前或向后扩展选择的任意字数（请参阅）。从这里开始，只需将文本与任意值列表进行比较。其他浏览器没有这个功能。浏览器战争的命运：一个人开发了一个令人敬畏的功能，而该功能被任何其他专利所忽略或禁止，因此该功能将永远失去并避免，因为对所有这些创新的跨浏览器支持的负担不可避免地落在了网站设计者的肩上

因此，下面是一个仅获取所选文本的父元素ID的通用函数。而且，要使用这种跨浏览器解决方案，您必须将每个单词包装在它自己的元素中，并使用唯一ID或其他属性完成。在这种设置下，向前看和向后看同级元素或顺序ID/命名元素应该是相对轻松的

这里需要注意的是，客户端必须从单词或短语的开头单击/拖动到结尾，并且绝对没有边界空格。即使双击一个单词也会导致它引用下一个元素（或者在IE的情况下，父DIV）。此外，应添加代码以将选择边界限制为单个父DIV，因为下面的代码还可能将选择扩展到周围的元素。但希望你能从这里开始解决这个问题。否则，就需要使用向量来精确定位文本相对于周围所有文本的坐标

<script type="text/javascript"> function get_selected_element_id() { if (window.getSelection) { // FF var range = window.getSelection(); } else if (document.selection) { // IE var range = document.selection.createRange(); } if (range.focusNode) { // FF var test_value = range.focusNode.parentNode.id; } else { // IE var test_value = range.parentElement().id; } return test_value; } </script> </head> <body> <div id="test_div"> <span id="test1">test</span> <span id="test2">asdf</span> <span id="test3">test2</span> <span id="test4">bla</span> </div> <button onclick="alert(get_selected_element_id());">go</button> 函数get_selected_element_id（）{ if（window.getSelection）{ //FF var range=window.getSelection（）； } else if（文档选择）{ //即 var range=document.selection.createRange（）； } if（范围.焦点节点）{ //FF var test_value=range.focusNode.parentNode.id； } 否则{ //即 var test_value=range.parentElement（）.id； } 返回测试值； } 测试asdf测试2 bla 去
@詹姆斯·怀斯曼：我打算含糊其辞地回答“仅在IE中可能”和“使用
move（“word”，+-1）
方法，但你的页面可能会被大部分用户破坏”。但范围对我来说是全新的。如果你知道更好的方法，我对这里很感兴趣。@user495688-你的问题很好而且有效，但我同意James的观点，你应该接受答案，这就是这个地方的运作方式。对不起，我忘记检查答案了。：）我假设用户可以选择一个单词，然后我得到所选单词前后的单词。但字数仅限于20字，也就是说，前面10个单词，后面10个单词，或者如果前面的单词只包含5个单词，那么可以灵活地在15个单词后使用。是否可以在不同的分区/段落中识别选择Ion前后的部分？？？@user495688-仍然不确定代码是否足够，或者是否必须在同一个分区中支持多个相同的单词段落关于“在不同的分区/段落中选择之前和之后的部分”，这并不容易-你不能控制文本的设计吗？是的，的确，我必须在所选的单词周围找到20个单词。在第一段中有5个单词，15个单词可以在其他段落中找到。这个问题的解决办法是什么？