Есть текст, который находится внутри div. При нажатии надо получить позицию буквы/слова, на которое произошел клик. Как такое реализовать?
-
позицию относительно чего ?– ccxdec4 июн 2020 в 18:23
-
@ryzen, Относительно строки. Весь текст хранится в строке и мне надо при нажатии определить слово и обернуть его в span.– Sire IMPACTUS4 июн 2020 в 18:29
-
А финальная цель-то какая? Пишете текстовый редактор, или для чего нужно выделить слово? Если вот просто выделить, ответ Артема - самое то: Один раз всё обернуть в span, и больше не трогать innerHTML: При клике менять класс элемента (который покрасит в другой цвет, например)– OPTIMUS PRIME4 июн 2020 в 19:20
-
@OPTIMUSPRIME, да, я пишу текстовый редактор. Мне нужно определять слово, на которое произошел клик, чтобы его: 1. Подсвечивать (показать активность) 2. При свайпе удалить 3. Показать его вариации и при необходимости удалить– Sire IMPACTUS4 июн 2020 в 19:26
2 ответа
В learn.javascript.ru упоминается об объекте Range
Range – это объект, соответствующий фрагменту документа, который может включать узлы и участки текста из этого документа. Наиболее подробно объект Range описан в спецификации DOM Range.
Вам необходимо использовать свойство startOffset
Свойство startOffset (endOffset) вернёт смещение для верхней (нижней) граничной точки.
приведен код и ссылка где можно посмотреть пример:
var range = getRangeObject();
if (range) {
alert( range );
alert( range.startContainer.nodeValue );
alert( range.startOffset );
alert( range.endOffset );
} else {
alert( 'Ничего не выделено' );
}
}
UPD: для получения определенного символа необходимо использовать
range.startContainer.nodeValue.substring(range.startOffset, range.startOffset+1)
-
мы же можем использовать к примеру substring range.startContainer.nodeValue.substring(range.startOffset, range.startOffset+1) 5 июн 2020 в 16:11
-
-
Как вариант - можно переработать текст так, чтобы каждая буква была внутри тега span с атрибутами data-word и data-letter - а также обработчиком события click.
То бишь, ввести подобную функцию:
const generateText = (text) => {
return text.split(' ').map((word, indexWord)=>word.split('').map((letter, letterIndex)=>`<span data-word=${indexWord} data-letter=${letterIndex} onclick="clickHandler(event)">${letter}</span>`).join('')).join(' ');
}
В div нужно отправлять результат обработки вашего текста с помощью этой функции (через innerHTML, или средствами каких-либо других библиотек, если вы их используете). А вот возможный обработчик клика:
const clickHandler = (event) => {
let wordIndex = event.target.getAttribute('data-word');
let letterIndex = event.target.getAttribute('data-letter');
console.log(`word: ${wordIndex}; letter: ${letterIndex}`);
}
UPD: это решение может оказаться низкопроизводительным
-
-
-
Вам ведь, вероятно, в любом случае потребуется визуально выделять буквы, на которые происходит клик. В этом случае все равно будет не обойтись без отдельных элементов под каждую букву. Главная проблема в том, что мое решение все же не совсем верное. Я сейчас перепроверил - событие не погружается так, как я рассчитывал, следовательно, придется навешивать каждому span свой обработчик - пусть и с одной и той же функцией. Вот это уже может быть действительно ресурсоемко...– artomich4 июн 2020 в 19:02
-
Есть еще одна идея, правда звучит она бредово: строго сверстать этот div с текстом - так, чтобы обработчик клика на див мог исходя из координат понять, над какой буквой пришелся клик– artomich4 июн 2020 в 19:04
-
1Ой, 1500 слов для JS ни о чем) Даже 10.000. Хотя зависит и от задачи конечно. 4 июн 2020 в 19:10