2

我可以使用以下代码获取用户在网页上选择的文本：

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

}

我是否可以在所选单词周围找到单词。

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

我的代码会告诉我这个人是否选择了“小部件”这个词。但我想知道选择是在“红色”还是“蓝色”之后。这可能吗？我一直在互联网上寻找一些建议，但我很难找到答案。

感谢您的帮助

4

3 回答 3

2

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

例如，如果以下是一个文本节点并且选择由竖线分隔：

"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);
}

Ranges 可以与其他 Ranges 进行比较，因此如果您想知道，例如，如果当前选择出现在上述文本节点中的单词“blue”之后，您可以创建一个包含单词“blue”的 Range，并将其与所选范围：

// 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 中，这些都不起作用，而且一切都以不同的方式完成，通常难度更大。要将其规范化为单一一致的界面，您可以使用我的Rangy库。

于 2010-12-02T09:27:13.060 回答
1

我编写了快速脚本，可以在同一 DIV 元素中识别选择之前和选择之后的部分。

但是，如果同一个 DIV 包含多次相同的单词并且您只选择了该单词，我编写的当前代码无法识别它是第一个还是第二个选择的单词，因此最重要的是它不会满足您的需求。

无论如何，您可以在此处查看/复制/测试代码：http: //jsfiddle.net/kvHxJ/只需选择一些内容并查看出现的警报。

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

于 2010-12-02T08:20:18.427 回答
0

IE 有一move组方法，可以将这个问题减少到几行，以便将选择向前或向后扩展任意数量的单词（参见http://www.webreference.com/js/column12/trmethods.html）。从那里开始，只需将文本与任意值列表进行比较即可。其他浏览器没有此功能 AFAIK。浏览器大战的命运：一个人开发了一个被任何其​​他专利忽略或禁止的令人敬畏的功能，因此该功能永远丢失和避免，因为对所有这些创新的跨浏览器支持的负担不可避免地落在了网站设计者身上。

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

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

<script type="text/javascript">

函数 get_selected_element_id() {
 如果（window.getSelection）{
  // FF
  var range = window.getSelection();
  }
 否则如果（document.selection）{
  // IE
  var range = document.selection.createRange();
  }
 如果（范围.focusNode）{
  // FF
  var test_value = range.focusNode.parentNode.id;
  }
 别的 {
  // IE
  var test_value = range.parentElement().id;
  }
 返回测试值；
 }


</脚本>

</head>

<正文>

<div id="test_div">
 <span id="test1">test</span> <span id="test2">asdf</span> <span id="test3">test2</span> <span id="test4">bla</跨度>
 </div>

<button onclick="alert(get_selected_element_id());">去</button>
于 2010-12-02T10:30:02.390 回答