Форум

savsoft · #1 (**permalink**) 30.01.2022, 01:41

Всем привет,

Есть textarea с текстом. Нужно при клике мышкой по слову, сделать его замену. Например, кликнув по слову word, заменить его на [word] или *word*. А при повторном клике вернуть в исходное состояние.

Толкните в нужном направлении, спасибо.

voraa · #2 (**permalink**) 30.01.2022, 08:32

Сообщение от savsoft

Толкните в нужном направлении, спасибо.

Направляйся в сторону использования selectionStart
https://developer.mozilla.org/en-US/...extAreaElement
setSelectionRange()
https://developer.mozilla.org/en-US/...SelectionRange
setRangeText()
https://developer.mozilla.org/en-US/...t/setRangeText
и обычных операций с строками

savsoft · #3 (**permalink**) 30.01.2022, 17:25

voraa,
Спасибо.
Подумал про два варианта:

Первый, юзер делает двойной клик по слову и браузер его выделяет, я же скриптом проверяю выделение, при необходимости меняю его, и обрабатываю.

Второй, по одиночному клику, определяю позицию, выбираю слово и обрабатываю.

По какому варианту лучше пойти?

Спасибо

voraa · #4 (**permalink**) 30.01.2022, 17:48

Откуда же я знаю, что это за приложения и какая работа там предполагается?

Если по одинарному клику, то как другие какие то действия делать, например поставить курсор и редактировать текст?

Предполагается ли вариант для мобильных?

Предполагается ли вариант (как во всяком солидном, уважающем себя и пользователей) вариант работы без мыши - только с клавиатуры?

savsoft · #5 (**permalink**) 30.01.2022, 17:54

Сообщение от voraa

Откуда же я знаю, что это за приложения и какая работа там предполагается?

Если по одинарному клику, то как другие какие то действия делать, например поставить курсор и редактировать текст?

Текст уже введен и отредактирован в другом месте (в Ворде), который используется для печатных материалов. Для исправления ошибок и корректировки будет правиться документ Ворд. Они просто копируют часть его содержимого и должны создать материал для студентов, то есть выделить некоторые слова.

Сообщение от voraa

Предполагается ли вариант для мобильных?

Предполагается ли вариант (как во всяком солидном, уважающем себя и пользователей) вариант работы без мыши - только с клавиатуры?

Это приложение только для нескольких пользователей/сотрудников для подготовки материалов. То есть по ТЗ они обеспечаны компьютером с мышкой. А вот для пользователей/клиентов, там другой функционал, там и смартфон/планшет/десктоп и без мышки и т.д.

рони · #6 (**permalink**) 30.01.2022, 19:04

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>

voraa · #7 (**permalink**) 30.01.2022, 19:04

Я бы сделал выделение и кнопку "изменить"
Выделять можно и двойным кликом и просто мышью. Слова бывают и с дефисом, а при двойном клике выделится только одна часть. Ну а кнопка от случайного изменения. Сначала выделил, потом изменил. А не просто выделил (а вдруг, случайно) и оно само изменилось.

voraa · #8 (**permalink**) 30.01.2022, 19:07

рони, по \s в регулярке будут хвататься запятые и точки в конце слова. Не думаю, что это надо.

рони · #9 (**permalink**) 30.01.2022, 19:18

Сообщение от 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>

voraa · #10 (**permalink**) 30.01.2022, 19:53

Меняет туда и обратно. Выделять как угодно
(на 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>

Форум

Справочник

Discord чат

Курсы javascript