Получить выделенный текст, за исключением невыбираемых элементов ⇐ Jquery

[Anonymous]

Я пытаюсь получить смещение символов для начала и конца выделенного фрагмента в статье. Однако мне бы хотелось, чтобы некоторые элементы игнорировались в этом процессе.

В моем приложении сервер работает с HTML до того, как JS динамически вводит несколько элементов, и очень важно, чтобы количество символов в тексте оставалось одинаковым между сервером и клиентом.

Я надеялся, что это будет так же просто, как window.getSelection() вместе с пользовательский выбор: нет;. К сожалению, хотя текст не выглядит выделенным, он все равно включен в выделенный диапазон.

Ниже я написал небольшой пример. У меня была попытка написать RemoveFromSelection в качестве обходного пути, но без особого успеха. Возможно, мне нужно удалить перекрывающиеся диапазоны .unselectable и вручную заполнить пробелы новыми объектами диапазона. У меня такое чувство, что это должно быть проще, чем я это делаю. Как мне это делать?

Код: Выделить всё

function findAncestorOffset(container, node, offset)
{
if (node == container)
return offset;
var parent = node.parentNode;
var syblings = parent.childNodes;
for (var i = 0, len = syblings.length; i < len; i++)
{
if (syblings[i] == node)
break;
offset += $(syblings[i]).text().length;
}
return findAncestorOffset(container, parent, offset);
}

function removeFromSelection(selector, selection)
{
$(selector).each(function(i, node){
var range = document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges(range);
});
}

var onSelect = function(){
var sel = window.getSelection();
//removeFromSelection('.unselectable', sel);
var text = sel.toString();
$('#out').text(text);
var range = sel.getRangeAt(0).cloneRange();
var i = findAncestorOffset($('.article')[0], range.startContainer, range.startOffset);
$('#from').text(i);
$('#to').text(i + text.length);
}
$('.article').mouseup(onSelect);
$('.article').focusout(onSelect);

Код: Выделить всё

.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

pre, .article {
border: solid 1px black;
padding: 12px;
}

Код: Выделить всё

Select This


This can be selected.

This can't.

And this can again.

Output

From: , To: 

Подробнее здесь: https://stackoverflow.com/questions/342 ... e-elements