获取 .html() 和 .text() 中突出显示的文本位置

我使用以下脚本来获取突出显示文本的位置：

function getSelectionCharOffsetsWithin(element) {
    var start = 0, end = 0;
    var sel, range, priorRange;
    if (typeof window.getSelection != "undefined") {
        range = window.getSelection().getRangeAt(0);
        priorRange = range.cloneRange();
        priorRange.selectNodeContents(element);
        priorRange.setEnd(range.startContainer, range.startOffset);
        start = priorRange.toString().length;
        end = start + range.toString().length;
    } else if (typeof document.selection != "undefined" &&
        (sel = document.selection).type != "Control") {
        range = sel.createRange();
        priorRange = document.body.createTextRange();
        priorRange.moveToElementText(element);
        priorRange.setEndPoint("EndToStart", range);
        start = priorRange.text.length;
        end = start + range.text.length;
    }
    return {
        start: start,
        end: end
    };
  }

function alertSelection() {
    var mainDiv = document.getElementById("detailBoxParagraph");
    var sel = getSelectionCharOffsetsWithin(mainDiv);
    alert(sel.start + ": " + sel.end);
}

现在，如果我用这个$('p').text()， 其中包含

痛苦的洛雷姆sitamet，consetetur sadipscing elitr。

一切都很好。但我还需要获得 $ 的位置('p').html()这显然是不同的，因为<b> tag

Lorem ipsum dolor `<b>sit</b>` amet, consetetur sadipscing elitr.

我该如何预防或改变这种情况？

Edit:

我忘了说，我的第一个想法是计算标签出现的次数，然后使用该值来计算新位置，但这在某种程度上是愚蠢的。

我的第二种方法是将标签替换为星号以进行工作.text()

Edit #2

这是一个显示问题的凌乱小提琴。如果您用鼠标突出显示文本，然后单击该按钮，第一次它将被正确设置为粗体。第二次将无法正常工作。

我很快就会清理小提琴

http://jsfiddle.net/UpLaw/2/

Edit #3

我使用下面提到的突出显示插件进行了一些尝试，但我无法限制该函数仅影响标记的字符串。它将突出显示所有匹配的单词或仅突出显示第一次出现的单词。有人可以帮忙吗？

这是必要的代码：

jQuery.fn.highlight = function(pat) {
this.length = 1 ;

function innerHighlight(node, pat) {

    var skip = 0;
    if (node.nodeType == 3) {
        var pos = node.data.toUpperCase().indexOf(pat);
        if (pos >= 0) {
            var spannode = document.createElement('span');
            spannode.className = 'highlight';
            var middlebit = node.splitText(pos);
            var endbit = middlebit.splitText(pat.length);
            var middleclone = middlebit.cloneNode(true);
            spannode.appendChild(middleclone);
            middlebit.parentNode.replaceChild(spannode, middlebit);
            skip = 1;
        }
    }
    else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {

        for (var i = 0; i < 1; ++i) { // So it will highlight only the first occurence. 
            i += innerHighlight(node.childNodes[i], pat);
        }
    }
    return skip;
}
return this.length && pat && pat.length ? this.each(function() {
    innerHighlight(this, pat.toUpperCase());

}) : this;
};

Edit #4

好吧，我试着理解那个 javscript。据我所知，这是无法完成的，因为使用简单的字符串作为参数调用highlight()。它无法知道该字符串的位置。我可以/应该解析该位置，然后尝试从该位置搜索，突出显示第一次出现，然后中止吗？

从您的评论来看，这就是您想要完成的任务。

我会尽力解释这一点。英语不是我的母语，很抱歉给您带来困惑。我想在突出显示的文本之前和之后插入一个 html 标签。为了实现这一点，我必须获得文本的开头和结尾。

假设sit是您要处理的突出显示的选择。

您可以使用 .wrap() 或 .after() 和 .before() 来完成此操作。

function alertSelection() {
    $("b", $('#detailBoxParagraph')).wrap('<i/>'); // make the  highlighted section inside a tag.

    $("b", $('#detailBoxParagraph')).before('<u>Content inserted before </u> '); // insert an html before highlighted selections.

    $("b", $('#detailBoxParagraph')).after(' <u>Content inserted after </u>'); // insert an html after highlighted selections.
}

$(function () {
    alertSelection();
})

在这里，我将突出显示的文本设置为斜体。

请参阅示例jsFiddle

参考

• .wrap()
• 。前（）
• .after()

如果您试图完成所选文本的突出显示，您可以使用jQuery 突出显示 plugin.

请参阅示例js小提琴。

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

$(function () {
    $('#detailBoxParagraph').mouseup(function (e){
        $(this).removeHighlight();
        $(this).highlight(getSelectionText());
   });
});