3

我有一个包含五次单词的字符串。如果我选​​择了 hello 它应该返回 4

 <div id="content">hello hai hello hello hello</div>

获取选定的文本脚本

<script>
 if(window.getSelection){
   t = window.getSelection();
 }else if(document.getSelection){
   t = document.getSelection();
 }else if(document.selection){
   t =document.selection.createRange().text;
 }
 </script>

如果选择 hai它应该返回1。

如果选择 hello hai它应该返回1。请帮忙。

4

2 回答 2

9

假设保证 的内容<div>是单个文本节点，这并不太难。以下不适用于 IE < 9，不支持 Selection 和 Range API。如果您需要对这些浏览器的支持，我可以为这种特殊情况提供代码，或者您可以使用我的Rangy库。

现场演示：http: //jsfiddle.net/timdown/VxTfu/

代码：

if (window.getSelection) {
    var sel = window.getSelection();
    var div = document.getElementById("content");

    if (sel.rangeCount) {
        // Get the selected range
        var range = sel.getRangeAt(0);

        // Check that the selection is wholly contained within the div text
        if (range.commonAncestorContainer == div.firstChild) {
            // Create a range that spans the content from the start of the div
            // to the start of the selection
            var precedingRange = document.createRange();
            precedingRange.setStartBefore(div.firstChild);
            precedingRange.setEnd(range.startContainer, range.startOffset);

            // Get the text preceding the selection and do a crude estimate
            // of the number of words by splitting on white space
            var textPrecedingSelection = precedingRange.toString();
            var wordIndex = textPrecedingSelection.split(/\s+/).length;
            alert("Word index: " + wordIndex);
        }
    }
}
于 2012-07-19T10:46:59.267 回答
3

您需要使用 DOM 的Range功能。以下是如何获取当前选择的范围：

var currentRange = window.getSelection().getRangeAt(0);

从那里 currentRage.startOffset 将告诉您选择在文件中的位置。因此，您需要将其与元素的起始范围进行比较：

var myContent = document.getElementById('content');
var divRange = document.createRange ();
divRange.selectNodeContents (myContent);

现在您可以将 divRange.startOffset 与您的选择 startOffset 进行比较，并确定您在哪个位置。

于 2012-07-19T10:23:19.853 回答