Как сделать регистрозависимые замены в строке?

Question

[Muranx]

<input class="input" type="text" placeholder="enter regExp here">
<p class="resultParagraph">"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>

let input = document.querySelector('.input');
let p = document.querySelector('.resultParagraph');
let startParagraph = p.innerHTML;

setInterval(()=>{ // просто функция чтобы параграф возвращался к стартовому значению
	if(!input.value)
		p.innerHTML = startParagraph;
}, 1000);


input.addEventListener('keypress', (e)=>{
	if(e.keyCode === 13){
		let res = new RegExp(input.value, 'gmi');
		let m = p.innerHTML.match(res);
     	p.innerHTML = p.innerHTML.replace(res, '<span style="background: red;">'+m[0]+'</span>'); // ! ! !
	}
});

Мне нужно, чтобы при вводе в поле input регулярного выражения, оно находилось в тексте и окрашивалось в (ну к примеру) в красный цвет. Всё бы хорошо, но интересует реализация данной задачи без m[0] , т.к. к примеру если регулярка учитывает наличие флага i(а она у меня учитывает) то получается что я заменяю вот этим вот m[0] даже те найденные в тексте совпадения, которые к примеру начинались с заглавной буквы, что разумеется мне не нужно, мне лишь нужно чтобы найденные совпадения подкрашивались, при этом не изменяя регистр. Просьба предложить вариант реализации, при котором если к примеру я введу в инпут at в тексте не заменятся все подстроки 'at' на 'At' т.к. m[0] в данном случае равняется At.

Answer 1

[0xD34F]

Метод replace умеет принимать функцию, которая получает найденную подстроку и должна вернуть замену:

m => `<span style="background: red;">${m}</span>`

Или, можно в строке замены указать, куда следует подставить заменяемую подстроку:

'<span style="background: red;">$&</span>'

Ерунду с интервалом уберите. Замену производите у текстового содержимого вместо разметки. Т.е.:

const p = document.querySelector('.resultParagraph');

document.querySelector('.input').addEventListener('keypress', e => {
  if (e.key === 'Enter') {
    const regex = RegExp(e.target.value, 'gmi');
    const replacement = '<span style="background: red;">$&</span>';
    p.innerHTML = p.textContent.replace(regex, replacement);
  }
});

Comments

[Muranx]

0xD34F, спасибо, а что можете сказать по поводу реализации? Думаю идея вам ясна, хотелось бы знать ваше мнение, имеет ли эта идея с подстановкой <span> право на жизнь? Или вы бы сделали по другому? И подскажите пожалуйста, где мне прочитать про ${m}, просто сто раз вижу, но не знаю что это за синтаксис, если не сложно подскажите как это называется, а я уже сам статьи найду!

[edward_freedom]

Muranx, https://developer.mozilla.org/ru/docs/Web/JavaScri...

[Muranx]

edward_freedom, спасибо!

Answer 2

[twobomb]

Ух чето как-то костыльно, особенно setInterval
сделай хотя бы типа

let input = document.querySelector('.input');
let p = document.querySelector('.resultParagraph');

input.addEventListener("input",(e)=>{	
	if(e.target.value.trim() == "")
  	Array.from(p.children).forEach(el=>{
    	p.replaceChild(document.createTextNode(el.textContent),el);
    });  
});
input.addEventListener("change",(e)=>{	
     	p.innerHTML = p.innerHTML.replace(new RegExp(input.value, 'gmi'), (a)=>
       `<span style="background: red;">${a}</span>`
      );
});

или только на ввод

let input = document.querySelector('.input');
let p = document.querySelector('.resultParagraph');

input.addEventListener("input",(e)=>{	
  	Array.from(p.children).forEach(el=>{
    	p.replaceChild(document.createTextNode(el.textContent),el);
    });  
     	p.innerHTML = p.innerHTML.replace(new RegExp(input.value, 'gmi'), (a)=>
       `<span style="background: red;">${a}</span>`
      );
});

Comments

[Muranx]

twobomb, красиво пишешь, я пока не особо вникал , мне нужна пока просто реализованная идеи, для тренировки регулярок на работе ( там нету интернета , но есть старый комп с IE10 ) ! Но твой ответ заслуживает внимания, пока у меня очень мало опыта , чтобы использовать все возможности JS! Спасибо за ответ, хотелось бы знать твоё мнение по поводу реализации данной идеи, я про оборачивание искомых подстрок в -ы?

[twobomb]

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

[Muranx]

twobomb, хм, понимаешь, там на этот комп нельзя ничего скинуть, запрещено строго на строго, поэтому я там в обычном блокноте пишу всякие штуки вроде этой! Блин, какой же ты красавчик! ;D Читаю твой код. и думаю, когда уже и я так-же научусь мыслить! Мне понятно всё что ты написал, но блин я бы так не догадался! удачи тебе !

[twobomb]

Muranx, С опытом придет. Ну если туда можно вставить флешку по безпалеву, то на флешке можно сделать портабл версию программы и нормального браузера.

[Muranx]

twobomb, за флэшку недавно типа чуть не уволили ! ;D Ну да ладно, в принципи того, что ты мне доисправил мне хватит! Удачи !

[twobomb]

Muranx, Страшно представить кем ты работаешь, нет интернета, нечего не установить за флешки увольняют с секретными данными что ли?

[Muranx]

twobomb, мм, а почему тебе страшно это представить? Обычная крупная гос. компания, корпоративная сеть, глушилки интернета даже есть ( чтобы в телефонах не сидели все ) и всё, чтобы народ не маялся дурью на работе, вся информация это корпоративные справочники, есть куча ограничений об распространении корпоративной информации, собственно оно и правильно, иначе бы я уже давно на работе изучил JS! ;D Вот поэтому и я юзаю обычный блокнот, и сранный ie, даже есть мысль свою песочницу замутить в будущем, чтобы код подсвечивался, сниппеты, макросы , и т. п. ! ;D Понимаю, звучит дико, дома я офк такой хернёй не маюсь, дома у меня и редакторов несколько, + использую много сторонних ресурсов и т. д. !

[twobomb]

Muranx, хах удивительно, но я также работаю в гос. структуре, у нас также запрещены всякие вай фаи, у всех есть локальная сеть, а также внутренняя сеть в которой есть свои веб и прочие серверы для внутренних сайтов и ПО организации, но есть и интернет, даже 3 интернета :D (остальные резервные), но доступен он только "избранным", я отношусь к касте таких :D, собственно и занимаюсь разработкой этого внутреннего ПО и поддержкой некоторых из серверов. Крч я понял, твоя идея выучить JS и пойти на вольные хлеба? Или просто работы настолько мало, скучно и не чем занятся, поэтому единственное развлечение, написание скриптов в блокноте?

[Muranx]

twobomb, Хм, всегда нравились фильмы про хаккеров, ну вот и начал изучать! ;) +делать столешницы из эпоксидки меня никогда не привлекало, мне больше повкусу сделать какуюнибудь интересную приложуху для себя (всегда это нравилось)! Вот и начал изучать, ну а на моей работе вахтовый график , т.е, есть и ночные смены, и вечерние, а там реально хоть на потолок лезь иной раз! Но это не значит что ТО место, где я работаю не требует профессионализма, там очень большая ответственность!) Просто можно сделать грамотно так, чтобы и начальство было довольно, и у тебя на смене было всё ровно! Вот и сижу книжки читаю по програмированию, да скриптики пишу в блокноте ! -_- понимаю как это звучит, но у меня всё норм, и з/п по меркам нашей страны нормальная, думаю если задуматься о карьере в IT сфере, то мне пока оччень долго придётся добиваться такой з/п. ( офк если конечно вакансии в ИТ сфере отражают реальную картину по з/п програмистов )! ;D Так что вот как-то так, надеюсь что после моих пояснений, у тебя в голове не появилась картинка с Гомером Симпсоном, который сидит на работе за монитором и жрёт чипсы ! ;D У нас может годами быть всё тип топ , а через день ты уже под судом ! (тьфу тьфу)