30.01.2022, 01:41
|
|
Профессор
|
|
Регистрация: 03.01.2019
Сообщений: 155
|
|
|
Замена слова в textarea по клику мышки.
Всем привет,
Есть textarea с текстом. Нужно при клике мышкой по слову, сделать его замену. Например, кликнув по слову word, заменить его на [word] или *word*. А при повторном клике вернуть в исходное состояние.
Толкните в нужном направлении, спасибо.
|
|
30.01.2022, 17:25
|
|
Профессор
|
|
Регистрация: 03.01.2019
Сообщений: 155
|
|
|
voraa,
Спасибо.
Подумал про два варианта:
Первый, юзер делает двойной клик по слову и браузер его выделяет, я же скриптом проверяю выделение, при необходимости меняю его, и обрабатываю.
Второй, по одиночному клику, определяю позицию, выбираю слово и обрабатываю.
По какому варианту лучше пойти?
Спасибо
|
|
30.01.2022, 17:48
|
 |
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,704
|
|
|
Откуда же я знаю, что это за приложения и какая работа там предполагается?
Если по одинарному клику, то как другие какие то действия делать, например поставить курсор и редактировать текст?
Предполагается ли вариант для мобильных?
Предполагается ли вариант (как во всяком солидном, уважающем себя и пользователей) вариант работы без мыши - только с клавиатуры?
|
|
30.01.2022, 17:54
|
|
Профессор
|
|
Регистрация: 03.01.2019
Сообщений: 155
|
|
Сообщение от voraa
|
Откуда же я знаю, что это за приложения и какая работа там предполагается?
Если по одинарному клику, то как другие какие то действия делать, например поставить курсор и редактировать текст?
|
Текст уже введен и отредактирован в другом месте (в Ворде), который используется для печатных материалов. Для исправления ошибок и корректировки будет правиться документ Ворд. Они просто копируют часть его содержимого и должны создать материал для студентов, то есть выделить некоторые слова.
|
Сообщение от voraa
|
Предполагается ли вариант для мобильных?
Предполагается ли вариант (как во всяком солидном, уважающем себя и пользователей) вариант работы без мыши - только с клавиатуры?
|
Это приложение только для нескольких пользователей/сотрудников для подготовки материалов. То есть по ТЗ они обеспечаны компьютером с мышкой. А вот для пользователей/клиентов, там другой функционал, там и смартфон/планшет/десктоп и без мышки и т.д.
Последний раз редактировалось savsoft, 30.01.2022 в 17:59.
|
|
30.01.2022, 19:04
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
Замена слова в 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>
|
|
30.01.2022, 19:04
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,704
|
|
|
Я бы сделал выделение и кнопку "изменить"
Выделять можно и двойным кликом и просто мышью. Слова бывают и с дефисом, а при двойном клике выделится только одна часть. Ну а кнопка от случайного изменения. Сначала выделил, потом изменил. А не просто выделил (а вдруг, случайно) и оно само изменилось.
|
|
30.01.2022, 19:07
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,704
|
|
|
рони, по \s в регулярке будут хвататься запятые и точки в конце слова. Не думаю, что это надо.
|
|
30.01.2022, 19:18
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
Сообщение от voraa
|
|
будут хвататься запятые
|
можно уточнить что именно является пробелом, /[^a-zа-яё*]/i
<!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>
|
|
30.01.2022, 19:53
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,704
|
|
Меняет туда и обратно. Выделять как угодно
(на 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>
Последний раз редактировалось voraa, 31.01.2022 в 07:20.
|
|
|
|
