在Javascript中按范围设置选择

Posted 2023-03-06

【中文标题】在Javascript中按范围设置选择

【英文标题】：Set selection by range in Javascript

【发布时间】：2013-07-14 13:06:33

【问题描述】：

我想通过使用 javascript 发送 location/anchorOffset 和 length/offset 来选择文本这是我的代码

  var node = document.getElementById("content");
   var range = document.createRange();
   range.setStart(node, 0);
   range.setEnd(node, 4); // here 0 and 4 is my location and length for the selection
       // if my string is "This is test string" in my case its must select "This" 
   var selection = window.getSelection();
   selection.removeAllRanges();
    selection.addRange(range);

但问题在于 range.setStart 和 range.setEnd 它没有像我预期的那样工作

【问题讨论】：

@AndyG 我在我的 ios 应用程序中使用它。剩余功能工作正常，但问题仅在于 setStart 和 setEnd 都不起作用

@AndyG：走错路了。 document.createRange() 是标准，除 IE

谢谢@TimDown。我在看selection.createRange。

【参考方案1】：

DOM Range 的setStart() 和setEnd() 方法已经很好地指定了，因此您可以通过阅读the spec 或MDN 找到答案。

总而言之，如果要根据字符偏移量指定范围边界，则需要处理文本节点而不是元素。如果您的元素包含单个文本节点，请将代码的第一行更改为以下内容：

var node = document.getElementById("content").firstChild;

【讨论】：

太好了，如果我在“内容”中只有一个文本行，它就可以工作。如果我在字符串上应用了粗体或字体标签怎么办。

@ShinningRiver：那你需要一个更复杂的解决方案，比如***.com/a/13950376/96100

【参考方案2】：

如果您尝试选择 jquery 结果集，这是一个很好的解决方案

var $newSelection = $('.someElements');
var selection = window.getSelection();
var range = document.createRange();
range.setStartBefore($newSelection.first()[0]);
range.setEndAfter($newSelection.last()[0]);
selection.removeAllRanges();
selection.addRange(range);