Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выделение текста при наборе пользователем (https://javascript.ru/forum/dom-window/53582-vydelenie-teksta-pri-nabore-polzovatelem.html)

Momon 09.02.2015 21:32

Выделение текста при наборе пользователем
 
Пользователь набирает текст input и в строке str происходит его выделение, например bold, при помощи обрамления тегами <b></b>. Казалось бы простой инструмент, но как реализовать, если учесть что:

1. Пользователь может вводить слова невпопад.
2. Между словами могут быть разные символы .,;- и т.д.
3. Последнее слово может являться начальной частью слова.
var str = "слово1, -слово2; слово3.";
var input = "слово1 слов";
// У меня такая идея:
str = str.replace(/[\.\,\;\-]/g, " "); // удаляем символы
str = str.replace(/\s+/g, " ").replace(/^\s|\s$/g, ""); // сжимаем пробелы
var arr = str.split(" "); // разбиваем строку по пробелам
for (var i = 0; i < arr.length; i++) {
str = str.replace(new RegExp("(\\s|^|-|>|\\.|,|;)(" + arr[i] + ")(?!\\S*</b>)"), "$1<b>$2</b>");
}
Но символы то остаются невыделенными и я придумал велосипед (хотя я наверно уже на нём еду).
Значит, при помощи match или ещё как находить все символы между словами:

(какие то символы)слово1(какие то символы)слово2(какие то символы)слово3(какие то символы)

Потом каждую такую группу разбивать split на отдельные символы, создавать ещё один цикл (какой там по счету) и проводить последовательное сравнение символов групп из str и input, и обрамлять тегами совпадающие... во :blink:

danik.js 09.02.2015 21:53

В input список слов, разделенных пробелом? Их надо подсветить?
Почему не делать просто replace(new RegExp(words[i]), '<b>$1</b>') - грубо говоря?

Momon 09.02.2015 22:38

danik.js,
Такой replace будет два раза выделять первое из повторяющихся слов, а ещё будет выделять куски из середины слова.
Ладно, не вникайте, я просто спросил может есть уже готовые решение какое нибудь? Задача ведь вроде бы простая. Или у меня подход неправильный?

danik.js 09.02.2015 22:45

Цитата:

Сообщение от Momon
а ещё будет выделять куски из середины слова

\b - не?
Цитата:

Сообщение от Momon
Такой replace будет два раза выделять первое из повторяющихся слов

Уверен?

danik.js 09.02.2015 22:47

Цитата:

Сообщение от danik.js
Уверен?

Или ты имеешь ввиду что юзер введет одно слово дважды? Тогда да, это проблема. Тогда нужно сначала уникализировать массив слов.

Momon 09.02.2015 22:55

danik.js,
Зачем его уникализировать? Например 2 одинковых слова в str и два слова набрал пользователь в input. Надо оба выделить. Я использую упреждение: (?!\\S*</b>), т.е. если уже обрамили тегами проходим мимо. Но не в этом суть, там же ещё символы выделять надо, строить все эти циклы и тд. Очень громоздко всё получается. Это вообще правильный подход?


Часовой пояс GMT +3, время: 18:33.