Замена слова в textarea по клику мышки.
Всем привет,
Есть textarea с текстом. Нужно при клике мышкой по слову, сделать его замену. Например, кликнув по слову word, заменить его на [word] или *word*. А при повторном клике вернуть в исходное состояние. Толкните в нужном направлении, спасибо. |
Цитата:
https://developer.mozilla.org/en-US/...extAreaElement setSelectionRange() https://developer.mozilla.org/en-US/...SelectionRange setRangeText() https://developer.mozilla.org/en-US/...t/setRangeText и обычных операций с строками |
voraa,
Спасибо. Подумал про два варианта: Первый, юзер делает двойной клик по слову и браузер его выделяет, я же скриптом проверяю выделение, при необходимости меняю его, и обрабатываю. Второй, по одиночному клику, определяю позицию, выбираю слово и обрабатываю. По какому варианту лучше пойти? Спасибо |
Откуда же я знаю, что это за приложения и какая работа там предполагается?
Если по одинарному клику, то как другие какие то действия делать, например поставить курсор и редактировать текст? Предполагается ли вариант для мобильных? Предполагается ли вариант (как во всяком солидном, уважающем себя и пользователей) вариант работы без мыши - только с клавиатуры? |
Цитата:
Цитата:
|
Замена слова в textarea по клику мышки
savsoft,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let textarea = document.querySelector(".txt");
textarea.addEventListener("click", function() {
let text = this.value,
start = this.selectionStart,
end = this.selectionEnd;
if (/\S/.test(text[start]) && start == end) {
while (start) {
if (/\s/.test(text[start - 1])) break;
start--;
}
while (end < text.length) {
end++;
if (/\s/.test(text[end])) break;
}
this.setSelectionRange(start, end);
let selected = text.slice(start, end);
if (selected) {
selected = (/\*\S+\*/.test(selected)) ? selected.slice(1, -1) : `*${selected}*`;
this.setRangeText(selected, start, end, "end");
}
}
})
});
</script>
</head>
<body>
<textarea name="txt" class="txt">hello word red* </textarea>
</body>
</html>
|
Я бы сделал выделение и кнопку "изменить"
Выделять можно и двойным кликом и просто мышью. Слова бывают и с дефисом, а при двойном клике выделится только одна часть. Ну а кнопка от случайного изменения. Сначала выделил, потом изменил. А не просто выделил (а вдруг, случайно) и оно само изменилось. |
рони, по \s в регулярке будут хвататься запятые и точки в конце слова. Не думаю, что это надо.
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let textarea = document.querySelector(".txt");
textarea.addEventListener("click", function() {
let text = this.value,
start = this.selectionStart,
end = this.selectionEnd;
if (/[a-zа-яё]/i.test(text[start]) && start == end) {
while (start) {
if (/[^a-zа-яё*]/i.test(text[start - 1])) break;
start--;
}
while (end < text.length) {
end++;
if (/[^a-zа-яё*]/i.test(text[end])) break;
}
this.setSelectionRange(start, end);
let selected = text.slice(start, end);
if (selected) {
selected = (/\*([a-zа-яё*]+)\*/i.test(selected)) ? selected.slice(1, -1) : `*${selected}*`;
this.setRangeText(selected, start, end, "end");
}
}
})
});
</script>
</head>
<body>
<textarea name="txt" class="txt">hello word. red* </textarea>
</body>
</html>
|
Меняет туда и обратно. Выделять как угодно
(на 100% не тестировал)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let bch = document.getElementById("bch");
txta = document.getElementById("txta")
bch.addEventListener("click", function() {
let text = txta.value,
start = txta.selectionStart-1,
end = txta.selectionEnd;
let rlet = /\p{General_Category=Letter}/u;
while (end > start && !rlet.test(text[end-1])) end --;
while (start < end && !rlet.test(text[start])) start ++;
if (start === end) return
let selected = text.slice(start, end);
if (selected) {
if (text[start-1] === '*' && text[end] === '*') {
txta.setRangeText(selected, start-1, end+1, "end");
} else {
selected = `*${selected}*`;
txta.setRangeText(selected, start, end, "end");
}
}
})
});
</script>
</head>
<body>
<textarea id=txta class="txt">Элемент HTML представляет собой многострочный элемент управления для редактирования обычного текста, который полезен, когда вы хотите разрешить пользователям вводить значительный объем текста в произвольной форме, например комментарий к отзыву или форму обратной связи.
</textarea>
<button id=bch> Change </button>
</body>
</html>
|
| Часовой пояс GMT +3, время: 17:11. |