获取.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() ，其中包含

Lorem ipsum dolor 坐在 amet，consetetur sadipscing elitr。

一切正常。 但我还需要在$ ('p').html()中获得这个位置，因为标签显然不同

 Lorem ipsum dolor `sit` amet, consetetur sadipscing elitr. 

我该如何预防或改变这个？

编辑：

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

我的第二种方法是用。星.text()用星号替换标签。

编辑＃2

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

我很快就会清理小提琴

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

编辑＃3

我用下面提到的高亮插件玩了一下，但我无法限制function只影响标记的字符串。 它将突出显示所有匹配的单词或仅突出显示第一个外观。 有人可以帮忙吗？

这是必要的代码：

 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; }; 

编辑＃4

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

Answer 1

从您的评论中，这是您想要完成的。

我会尽力解释这个问题。 英语不是我的母语，对于这种混乱感到抱歉。 我想在突出显示的文本之前和之后插入一个html标记。 要实现这一点，我必须得到文本的开头和结尾。

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

您可以使用.wrap（）或.after（）和.before（）来完成此任务。

 function alertSelection() { $("b", $('#detailBoxParagraph')).wrap(''); // make the highlighted section inside a tag. $("b", $('#detailBoxParagraph')).before('Content inserted before  '); // insert an html before highlighted selections. $("b", $('#detailBoxParagraph')).after(' Content inserted after '); // insert an html after highlighted selections. } $(function () { alertSelection(); }) 

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

请参阅jsFiddle中的示例

参考

• 。包裹（）
• 。之前（）
• 。后（）

---

如果您尝试完成所选文本以突出显示，则可以使用jQuery高亮插件。

请参阅jsFiddle中的示例。

 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()); }); });