Question

我想知道我突出显示的文字的开头和结尾位置（字符数），包括HTML。

示例：

<div class="container">    
<div id="test">
        Hello world, how <a href="#">are</a> you doing?
    </div>
</div>

我想知道的例子：

function startStop(){
    //
    // Do something here with selected text inside the DIV container
    //
    return {
        start: ???,
        stop: ???
    }
}

当我选择：how <a href="#">are</a> you时，输出结果为：start = 30和stop = 57

注意：所以它从container div

开始计算

更新当我使用：window.getSelection().getRangeAt(0).startOffset时，它在当前元素中给出了startOffset BUT，我希望它来自父元素。
所以在我的例子中，如果我选择了'world'，它将输出6但我还需要<div id="test">所以输出需要是：21

Answer 1

试试这个：

function startStop(word){
    var start = $.trim($('#test')[0].innerHTML).indexOf(word);
    var stop = start + word.length;
    return {
        start: start,
        stop: stop
    }
}

修剪将确保删除所有空格等。然后我们只检查内部html中给定单词的索引以了解开始。结尾等于给定单词的开头+长度。

请注意，它将返回29，而不是30，因为它以0 ...

开头

这里可以看到一个小的测试用例：http://jsfiddle.net/UQ2aC/

如果你想要包含所选的div，你可以使用outerHTML而不是innerHTML（cfr。http://jsfiddle.net/UQ2aC/1/）

$.trim($('#test')[0].outerHTML).indexOf(word);

请注意，在div中的句子之前，您必须确保您的html结构良好，没有空格。因为这样，它也会计算这些。

另一种选择，如果你真的想使用'脏'html，那就是这样的：

$.trim($('#test')[0].outerHTML).indexOf('>') + $.trim($('#test')[0].innerHTML).indexOf('world') + 1

这将首先计算第一个标签本身的长度，并添加内部文本的长度而不需要任何空格...（cfr。http://jsfiddle.net/UQ2aC/2/）

Answer 2

我不完全确定您要归档的内容，但如果您想计算div标签内的字符数，那么maby可以提供帮助：Javascript character count

获取突出显示文本的div位置

2 个答案: