计算所选文本 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 [重复]