计算所选文本 javascript/JQuery 的位置？
Posted
技术标签:
【中文标题】计算所选文本 javascript/JQuery 的位置？【英文标题】：Calculate Position of selected text javascript/JQuery? 【发布时间】：2011-12-20 22:42:05 【问题描述】：如何通过计算正文标记后的偏移量来检索所选文本的位置？
例如考虑以下html，
<body> <div>hi</div> <div>dude!</div> </body>
在从“i”（嗨）到“du”（在花花公子）中选择时，我需要将 2 作为开始位置，将 4 作为结束位置。
注意：忽略标签元素。
最好使用javascript！
【问题讨论】：
您有一个文本并且想要选定文本的开始和结束索引？我说的对吗？ 类似jsfiddle.net/raynesax/p3nBd erimerturk：没错。要添加更多内容，请从正文标记内的第一个字符串开始和结束索引。 Rajat Saxena：没用！在 Firefox 上测试。 【参考方案1】：这里有一些简单、幼稚的代码来执行此操作，它们可能很适合您的用例。它不考虑任何可能变得不可见的文本（例如，通过 CSS 或通过在 a or 元素内），并且可能存在带有换行符的浏览器差异（IE 与其他所有内容），并且不考虑折叠的空白（例如 2 个或更多连续的空格字符折叠到页面上的一个可见空间）。但是，它在所有主流浏览器中都适用于您的示例。
现场演示：http://jsfiddle.net/UuDpL/2/
代码：
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
;
alert( getSelectionCharOffsetsWithin(document.body).start );
【讨论】：
嗨，蒂姆，首先感谢 rangy！我想知道你是否可以帮助我，我有相反的问题。如果我有一个父节点和开始/结束字符偏移量（通过类似于您的解决方案的方法获得），我如何从这些偏移量中获得一个范围广泛的范围，而不考虑任何可能包含部分文本的 ? @Tim Down：它也对我有帮助……谢谢。现在，我想要的是我希望文本返回到选定的位置。【参考方案2】：使用以下 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);
【讨论】：
您的代码将仅突出显示选定的文本，但提出的问题是根据给定范围突出显示。 Tim Down 已经准确地回答了所需要的。以上是关于计算所选文本 javascript/JQuery 的位置？的主要内容，如果未能解决你的问题，请参考以下文章
javascript jquery移动代码，用于检查单选按钮结果，多项选择
在 Javascript/JQuery 中选择单选选项时，是不是可以动态更改下拉列表的颜色或更改列表项的颜色？
是否可以使用 JavaScript/jQuery 解决这种情况？ [复制]
如何使用 jquery/javascript 将文本插入 json [重复]