javascript 计算所选文本javascript/JQuery的位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7991474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calculate Position of selected text javascript/JQuery?
提问by Mani
How to retrieve the position of selected text by calculating it's offset immediate after body tag?
如何通过计算正文标签后的偏移量来检索所选文本的位置？
For Example consider the following html,
例如，考虑以下 html，
<body> <div>hi</div> <div>dude!</div> </body>
on selecting from "i" (in hi) to "du" (in dude), I need to get 2 as start position & 4 as end position.
在从“i”（在 hi）中选择“du”（在花花公子中）时，我需要将 2 作为起始位置和 4 作为结束位置。
Note: Ignore the tag elements.
注意：忽略标签元素。
Javascript is preferable!
最好使用Javascript！
回答by Tim Down
Here's some simple, naive code to do this that may well do the job for your use case. It does not take into account any text that may be made invisible (either by CSS or by being inside a or element, for example) and may have browser discrepancies (IE versus everything else) with line breaks, and takes no account of collapsed whitespace (such as 2 or more consecutive space characters collapsing to one visible space on the page). However, it does work for your example in all major browsers.
这里有一些简单、幼稚的代码来执行此操作，它们很可能适合您的用例。它不考虑任何可能变得不可见的文本（例如，通过 CSS 或通过在 或 元素内部）并且可能具有带有换行符的浏览器差异（IE 与其他所有内容），并且不考虑折叠的空白（例如 2 个或更多连续空格字符折叠为页面上的一个可见空格）。但是，它在所有主要浏览器中都适用于您的示例。
Live demo: http://jsfiddle.net/UuDpL/2/
现场演示：http: //jsfiddle.net/UuDpL/2/
Code:
代码：
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 );
回答by Mohit kumar
Use following java script function for Highlighting the html page..
使用以下 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);
}
