如何找到标记（元素）的字符串索引，而不计算展开的实体？ [英] How do I find the string index of a tag (an element) without counting expanded entities?

问题描述

我有一大块文本，我想要选择，通过其 startindex 和 endindex 。 （例如，在字中选择或将会给我 startindex 1 和endindex 2 。）

I've got a large piece of text which I want to be able to select, storing the selected part by its startindex and endindex. (For example, selecting or in word would give me startindex 1 and endindex 2.)

工作正常，但是我有一个HTML实体的问题，例如& （和号）。

This all works properly, but I've got a problem with HTML entities such as & (the ampersand).

我创造了一个小问题，其中的问题是。您可以在下面的小提琴中看到，如果您选择& 之外的任何内容， startIndex 会膨胀，因为它不将& 作为单个字符，而不是5个字符：& amp; amp; 。

I've created a little case in which the issue consists. You can see in the fiddle below that the startIndex inflates if you select anything beyond the &, because it doesn't count the & as a single character, but rather 5 characters: &.

有没有办法让它适当地计数特殊字符，如&符号，而不需要修正索引？

Is there a way to make it count properly special characters like the ampersand, without screwing up the index?

http://jsfiddle.net/Eqct4/

$(document).ready(function() {
    $('#textBlock').mouseup(function() {
        var selectionRange = window.getSelection();
        if (!selectionRange.isCollapsed) {
            selectedText = selectionRange.getRangeAt(0).toString();
        }

        document.getElementById('textBlock').setAttribute('contenteditable', true);
        document.execCommand('strikethrough', false);
        var startIndex = $('#textBlock').html().indexOf('<strike>');
         $('#startindex').html('the startindex is: ' + startIndex);
        done();
    });
});

function done() {
    document.getElementById('textBlock').setAttribute('contenteditable', false);
    document.getSelection().removeAllRanges();
    removeStrikeFromElement($('#textBlock'));
}

function removeStrikeFromElement (element) {
    element.find('strike').each(function() {
        jQuery(this).replaceWith(removeStrikeFromElement(jQuery(this)));
    });
    return element.html();
}

我认为/知道它与 $（'＃textBlock'）。html（）用于执行 indexOf 而不是 text（）。获得开始和 endindex 的最佳方式是< strike> 通过选择的文本，因为 execCommand 让我来做，这是一个HTML标签，从未在应用程序中使用。

I think/know it has to do with the $('#textBlock').html() used to do the indexOf instead of text(). The best way to get a start and endindex was to <strike> through the selected text since the execCommand let's me do that and it's a HTML tag never used in the application.

推荐答案

如果你真的想使用你的代码，只是修改一点，你可以用可见的等效替换所有特殊字符，同时保持html标签...
将您的startIndex声明更改为：

If you really want to use your code and just modifying it a little you could replace all special characters with the visible equivalent, while keeping the html tags... Change your declaration of startIndex to this:

var startIndex = $('#textBlock').html().replace(/&amp;/g, "&").replace(/&quot;/g, "\"").indexOf('<strike>');

您可以将replaceaces（）函数附加到您想要作为普通字符的其他特殊字符，而不是其HTML版本。在我的示例中取代了&和字符。

you can append the replaces() functions with other special characters you want to count as normal characters not the HTML version of them. In my example i replaced the & and the " characters.

您的代码中有更多的优化可能，这是一个简单的方法f ix你的问题。

There are more optimalisations possible in your code this is a simple way to fix your problem.

希望这有帮助，看到这个分叉的小提琴在这里
http://jsfiddle.net/vQNyv/

Hope this helps a bit, see the forked fiddle here http://jsfiddle.net/vQNyv/

这篇关于如何找到标记（元素）的字符串索引，而不计算展开的实体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！