计算所选文本javascript/JQuery的位置？_Javascript_Jquery_Html_Tags_Selection

计算所选文本javascript/JQuery的位置？

javascript jquery html tags

计算所选文本javascript/JQuery的位置？,javascript,jquery,html,tags,selection,Javascript,Jquery,Html,Tags,Selection,如何通过计算正文标记后的偏移量来检索选定文本的位置例如，考虑下面的HTML， <body> <div>hi</div> <div>dude!</div> </body> 嗨，伙计！从“i”（在hi中）选择“du”（在dude中），我需要得到2作为起始位置，4作为结束位置注意：忽略标记元素 Javascript更好下面是一些简单、朴素的代码，可以很好地完成您的用例。它不考虑任何可能不可见的文本（例如，通过CSS或位

如何通过计算正文标记后的偏移量来检索选定文本的位置

例如，考虑下面的HTML，

<body> <div>hi</div> <div>dude!</div> </body>

嗨，伙计！从“i”（在hi中）选择“du”（在dude中），我需要得到2作为起始位置，4作为结束位置

注意：忽略标记元素

Javascript更好

下面是一些简单、朴素的代码，可以很好地完成您的用例。它不考虑任何可能不可见的文本（例如，通过CSS或位于或元素内部），以及可能存在浏览器差异（即与其他所有内容相比）和换行符，并且不考虑折叠的空白（例如，两个或多个连续的空格字符折叠到页面上的一个可见空格）。但是，它在所有主流浏览器中都适用于您的示例

现场演示：

代码：

使用以下java脚本函数突出显示html页面

function stylizeHighlightedString() 
{
    var range               = window.getSelection().getRangeAt(0);
    var selectionContents   = range.extractContents();
    var span                = document.createElement("span");
    span.appendChild(selectionContents);
    span.setAttribute("class","uiWebviewHighlight");

    span.style.backgroundColor  = "red";
    span.style.color            = "white";

    range.insertNode(span);
}

您有一个文本，是否希望选定文本开始和结束索引？我说得对吗？有点像埃里默特克：没错。要添加更多内容，请从body标记内部的第一个字符串开始和结束索引。Rajat Saxena:不起作用！在Firefox上测试。嗨Tim，首先感谢rangy！我不知道你是否能帮我，我有相反的问题。如果我有一个父节点和开始/结束字符偏移量（使用类似于您这里的解决方案的方法获得），我如何从这些偏移量中获得一个范围，而不考虑可能会包裹部分文本的任何s？@Tim Down:这也有助于我。。谢谢现在，我想要的是文本返回到选定的位置。您的代码将只突出显示选定的文本，但问题是根据给定的范围突出显示。蒂姆·唐恩已经准确地回答了需要的问题。

function stylizeHighlightedString() 
{
    var range               = window.getSelection().getRangeAt(0);
    var selectionContents   = range.extractContents();
    var span                = document.createElement("span");
    span.appendChild(selectionContents);
    span.setAttribute("class","uiWebviewHighlight");

    span.style.backgroundColor  = "red";
    span.style.color            = "white";

    range.insertNode(span);
}