javascript - 当多个样式附加到html中的给定单词时，如何使用范围API单击一次单词

Question

例如，我有这样的 html：

<span>"This is s"<strong>xy</strong>"z"<strong>ample</strong>" text"</span>

http://jsfiddle.net/6Lumh3av/

当我在“This is s xy z ample text”句子中的“sxyzample”词之间单击时，我想使用范围 API 选择“sxyzample”词，以便使用以下值创建新范围。

range.startContainer.nodeType=3
range.startContainer.textContent= "This is sa" 
range.endContainer.nodeType=3
range.endContainer.textContent="mple"
range.startOffset=8
range.endOffset=5

我正在使用 window.getSelection()、范围、节点。

代码片段如下。

<span class="clickable">"This is s"<strong>xy</strong>"z"<strong>ample</strong>" text"</span>

$(".clickable").click(function(e) {
s = window.getSelection();
var range = s.getRangeAt(0);
var node = s.anchorNode;
while (range.toString().indexOf(' ') != 0) {
    range.setStart(node, (range.startOffset - 1));
}
range.setStart(node, range.startOffset + 1);
do {
    range.setEnd(node, range.endOffset + 1);

} while (range.toString().indexOf(' ') == -1 && range.toString().trim() != 
'' && range.endOffset < node.length);
var str = range.toString().trim();
alert(str);
});​

标签： javascriptrangeselection