qork
@qork
{ background: #F00B42 }

Как правильно маркировать текст регулярными выражениями?

Проблема в сохранении регистра. "ПоСтеР" заменился на "Постер". Ошибку свою увидел (вставляю строку именно из адреса в место, где прошелся регуляркой уже в результатах поиска). Куда копать, чтобы текст маркировался, но сохранялся прежний регистр исходного текста?

HTML
<h3>Адресная строка:</h3>
<div class="url">https://toster.ru/results.html&search=остер</div>
<h3>Результаты поиска:</h3>
<div class="search-res">тостер ПоСтеР комПОСТер</div>
<div class="search-res">Григорий Остер и клостЕР</div>

CSS
.search-mark{
  background:#8BC34A;
}

JS
var urlSearchResult = $('.url').text().replace(/(https?:\/\/toster\.ru\/results\.html\&search=)(.*)/ig,'$2');

var regSearch = new RegExp(urlSearchResult, 'ig');

var searchSpan = "<span class='search-mark'>"+urlSearchResult+"</span>";

var resCount = $(".search-res").length;

for(var i = 0; i <= resCount - 1; i++){
  var searchInsert = $('.search-res').eq(i).text().replace(regSearch, searchSpan);
  $('.search-res').eq(i).html(searchInsert);
};

На выходе
f220fc6811714f899bcb643ee17b71af.png
codepen.io/anon/pen/pyJGEG

UPD
Почти решил задачу, но придётся отставить её на пару часов.
  • Вопрос задан
  • 383 просмотра
Решения вопроса 1
Stalker_RED
@Stalker_RED
Вот так вроде работает:
var searchStr = 'остер'

var source = document.querySelector('#source')
var result = document.querySelector('#result')
var regexp = new RegExp('('+searchStr+')', "gim");

result.innerHTML = source.innerHTML.replace(regexp, "<span>$1</span>");
Демо: https://jsfiddle.net/9c0n02Lp/

Но есть ложка дегтя:
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user.

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

Хотя практически все браузеры поддерживают.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы