Как выбрать слово одним щелчком мыши, используя Range API, когда к html прикреплено несколько стилей - PullRequest
1 голос
/ 09 мая 2019

Например, у меня есть такой HTML:

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

http://jsfiddle.net/6Lumh3av/

Когда я нажимаю между словом "sxyzample" из предложения "Это s xy z достаточно текст", я хочу выбрать слово "sxyzample" с помощью API диапазона, чтобы новые диапазон будет создан со следующими значениями.

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);
});​
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...