Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.07.2017, 22:08
Интересующийся
Отправить личное сообщение для LinaInverse Посмотреть профиль Найти все сообщения от LinaInverse
 
Регистрация: 01.07.2017
Сообщений: 10

Класс RegExp
<head>
	<meta charset="utf-8">
</head>
<body>
	<input type="text">
	<div>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Свой подзаголовок, эта напоивший текста по всей до одна несколько обеспечивает свой все, рукописи мир то продолжил скатился дал алфавит всеми.</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
$('input').keyup(function(){
var inp = new RegExp($(this).val(), 'g');
var str = $('div').text().replace(inp, '<span style="color:red">'+inp+'</span>');
$('div').html(str);
});
	</script>
</body>

Как поправить? чтоб спец символы не вылазили. Пожалуйста
Ответить с цитированием
  #2 (permalink)  
Старый 01.07.2017, 22:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

LinaInverse,
<head>
  <meta charset="utf-8">
</head>
<body>
  <input type="text">
  <div>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Свой подзаголовок, эта напоивший текста по всей до одна несколько обеспечивает свой все, рукописи мир то продолжил скатился дал алфавит всеми.</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
function escapeRegExp(string){
  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

var str = $('div').text();
$('input').on('input', function(){
var v = this.value;
var inp = new RegExp(escapeRegExp(v), 'g'); 
var text = str.replace(inp, '<span style="color:red">'+v+'</span>');
$('div').html(text);
});
  </script>
</body>

Последний раз редактировалось рони, 01.07.2017 в 22:26.
Ответить с цитированием
  #3 (permalink)  
Старый 01.07.2017, 22:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Rise,
они найденное RegExp перезаписывают на RegExp
Ответить с цитированием
  #4 (permalink)  
Старый 01.07.2017, 22:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

LinaInverse,
исправил немного код, скопируйте заново пост№2
Ответить с цитированием
  #5 (permalink)  
Старый 01.07.2017, 22:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

LinaInverse,
this.value лучше не трогать ...
var text = str.replace(inp, '<span style="color:red">'+this.value+'</span>');

или смотрите код выше
Ответить с цитированием
  #6 (permalink)  
Старый 01.07.2017, 22:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

LinaInverse,

окончательный вариант ...
var str = $('div').text();
$('input').on('input', function(){
var v = this.value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
var inp = new RegExp(v, 'g');
var text = str.replace(inp, '<span style="color:red">$&</span>');
$('div').html(text);
});
Ответить с цитированием
  #7 (permalink)  
Старый 01.07.2017, 22:51
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,138

Сообщение от LinaInverse Посмотреть сообщение
Рони, а вы не в курсе нет ли где конструктора для создания регулярного выражения "Для чайников".
https://regex101.com/
Ответить с цитированием
  #8 (permalink)  
Старый 01.07.2017, 22:54
Интересующийся
Отправить личное сообщение для LinaInverse Посмотреть профиль Найти все сообщения от LinaInverse
 
Регистрация: 01.07.2017
Сообщений: 10

Сообщение от MallSerg Посмотреть сообщение
https://regex101.com/
спасибо, жалко что все на инглише.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскаите как менять класс у елемента в зависимость от класса другово елемента NirVanea Общие вопросы Javascript 4 10.09.2015 13:51
Добавить / удалить класс кликом fabrique Общие вопросы Javascript 4 03.09.2014 04:43
Изменить класс родительского элемента STyLe Общие вопросы Javascript 1 29.05.2014 20:21
Как удалить класс у соседних элементов housewm Events/DOM/Window 4 11.03.2014 13:29
Jquery немогу установить класс! shureg Общие вопросы Javascript 4 26.10.2010 14:37