当多个样式附加到html中的给定单词时，如何使用范围API在单击时选择单词

Question

例如，我有这样的html：

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

http://jsfiddle.net/6Lumh3av/

当我在“这是s xy z ample 文本”句子中的“ 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);
});​