Я смотрю на выделение текста и диапазоны в JavaScript.

Мне нужно получить любые узлы, которые точно окружают выделенный текст, например:

<div>this is <span>some simple</span> text</div>

Когда пользователь выбирает слова «некоторые простые», мне нужно знать, что он полностью находится внутри узла. Тем не менее, если они выбирают просто «некоторые», то это не полностью внутри узла, так как слово «простой» НЕ выбрано.

Конечное требование - иметь возможность изменять класс на узле, только если весь текст внутри узла выбран.

JQuery также является жизнеспособным. Благодарность

Чтобы добавить немного контекста к этому, когда пользователь выбирает некоторый текст, мы добавляем к нему немного стиля, скажем, «жирный». пользователь может редактировать текст в родительском элементе div так часто, как он пожелает, чтобы каждое редактирование могло добавить новый диапазон, включающий выделенный текст. Мы могли бы получить что-то вроде этого:

<div><span class="text-bold">Hi</span>, <span class="text-red">this <span class="text-italic">is</span></span> a sample text item</div>

Таким образом, пролеты могут приходить и уходить в зависимости от того, что хочет пользователь.

1
Alex Stephens 10 Янв 2017 в 10:55

2 ответа

Вы хотите получить DOM каждый раз. Таким образом, вы можете установить id для вашего HTML Element Objects и получить значение из них. Например:

 <span id="f_span">some simple</span>

<script>
     var x = document.getElementById("f_span");
</script>

Затем вы можете проверить, равно ли значение x значению, которое выбрал пользователь.

0
wdika 10 Янв 2017 в 08:02

Вы можете использовать setInterval, чтобы получать выделенный текст каждую x секунду. С присоединенной функцией вы можете получить выделенный текст.

Для выбора пользователя:

function getSelected() {
    if(window.getSelection) { return window.getSelection(); }
    else if(document.getSelection) { return document.getSelection(); }
    else {
        var selection = document.selection && document.selection.createRange();
        if(selection.text) { return selection.text; }
        return false;
    }
    return false;
}

Он возвращает объект, который дает вам смещение выделения. Если result.anchorOffset = 0 и result.focusOffset = result.anchorNode.length (если он начинается в начале узла и имеет длину всего узла), то пользователь выбрал весь ваш узел.

0
Sail 10 Янв 2017 в 08:16