【问题标题】:Position of selection in javascriptjavascript中选择的位置
【发布时间】:2013-06-29 23:04:30
【问题描述】:

我正在尝试查找所选文本在 div 中的位置。我提示用户在 div 中选择文本的子字符串,然后提交。我需要起点和终点的索引,使用下面的策略没有成功。任何帮助将非常感激。

这是我拥有的功能,但它不起作用:

if (typeof window.getSelection != 'undefined') {                                                                                                                                                                                                                            
var sel = window.getSelection();                                                                                                                                                                                                                                          
var range = sel.getRangeAt(0);                                                                                                                                                                                                                                               
var preCaretRange = range.cloneRange();                                                                                                                                                                                                                               
startOffset = preCaretRange.toString().length;                                                                                                                                                                                                                        
endOffset = startOffset + range.toString().length;
}     

该 div 被称为“myarea”。谢谢

【问题讨论】:

  • 哪一行“不工作”?你的if 条件是真的吗?是否有任何行抛出错误?您是否正在获取范围的数值,但它们与预期不同(例如,-10)?
  • 可能相关且有帮助:stackoverflow.com/questions/5669448/…

标签: javascript html


【解决方案1】:

你几乎是对的!
它的 startOffset 导致它无法工作。
目前是:

var startOffset = preCaretRange.toString().length;

RHS 上的值preCaretRange.toString().length 将返回已选择字符串的总长度,不是起始位置。要获得起始位置,您将使用存储 by 范围的 startOffset 属性。因此:

var startOffset = preCaretRange.startOffset;

关于优化的说明:您不需要将range 克隆到preCaretRange.

document.body.addEventListener('mouseup', function () {
    if (typeof window.getSelection != 'undefined') {
        var sel = window.getSelection();
        var range = sel.getRangeAt(0);

        var startOffset = range.startOffset;
        var endOffset = startOffset + range.toString().length - 1;

        console.log("Selection starts at: " + startOffset);
        console.log("Selection ends at: " + endOffset);
    }
}, false);

这是一个小提琴,它演示了它与实际文本选择一起使用:http://jsfiddle.net/Dp3qp/3/

【讨论】:

  • 这适用于 startoffset 但不适用于 end offset.. 它提供的索引比实际索引更大。
  • 所以它适用于第一个选择,但不适用于以下选择。
  • 如果您正在寻找一个包含的结束范围,那么只需将 endOffset 更改为 endOffset - 1
  • 我用多项选择测试了它,似乎没问题,您能否详细说明您的测试输入?
  • 当然,所以我用它来选择div“myarea”中的文本,然后单击一个按钮来记录选择,然后再次选择。第一次选择总是有效,但是..以下选择总是不正确的。
猜你喜欢
  • 2011-07-31
  • 2012-04-08
  • 1970-01-01
  • 1970-01-01
  • 2021-11-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-05-09
相关资源
最近更新 更多