Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как можно выделить определенные символы в input? (https://javascript.ru/forum/dom-window/70858-kak-mozhno-vydelit-opredelennye-simvoly-v-input.html)

LADYX 07.10.2017 16:30

Как можно выделить определенные символы в input?
 
Добрый день! Подскажите, пожалуйста, есть ли какой-то способ выделить отдельным стилем (цвет, например) определенные символы в поле input? С помощью :contains это, наверное, невозможно, он делает выборку, и выделяет сразу дивами или какими-то блоками. А мне нужно выделить именно определенные символы. Через return text.replace(new RegExp( тоже не вариант. Вот я и не знаю, как можно это сделать. Помогите, пожалуйста.

Nexus 07.10.2017 20:22

https://jsfiddle.net/s69v7xvk/
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только <div>успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время,</div> программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</div>
<script>
  $(function(){
    var find_string='е';
    $('*:contains("'+find_string+'")').filter(function(){
      var $t=$(this).clone();
      $t.find('>*').remove();

      if($t.text().indexOf(find_string)==-1)
        return false;

      $(this).html(this.innerHTML.replace(new RegExp('('+find_string+')','gm'),'<span style="color:red;">$1</span>'));
    });
  });
</script>

Работает, но мне не нравится алгоритм.
Возможно можно работать сразу с контентом document.body и избавится от нахождения прямого родителя текста, который будет изменен.
+ нужно усложнить регулярку, сейчас она может модифицировать и html код, что приведен к его инвалидности.

рони 07.10.2017 20:44

Nexus,
Цитата:

Сообщение от LADYX
выделить ... символы в поле input

:-?
я такого способа напрямую не знаю, только contenteditable вместо input

LADYX 07.10.2017 22:12

Да, наверное я захотел изобрести что-то невозможное :)
Nexus,
рони,
Спасибо вам за ответы. Удачи вам!

Nexus 08.10.2017 11:46

рони, таки да, вообще не к месту мой код.
Прошу прощения за крайнюю невнимательность.


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