Блог

Главная - Вопросы по программированию - Получить все вхождения с помощью window.find

Получить все вхождения с помощью window.find

#javascript #highlight #find-occurrences

#javascript #выделить #найти-вхождения

Вопрос:

Я хочу выделить в тексте все вхождения из слова, которое у меня есть в моем URL. Для первого вхождения все работает нормально. Но я не знаю, как перейти к следующему.

 highlightText: function(urlParams) {
  var urlSearch = window.location.search;
  var urlParams = new URLSearchParams(urlSearch);
  var searchText = urlParams.get('search');
  if (window.find(searchText)) {
    var el = document.getElementById('collection-content');
    text = el.innerHTML;
    marked = text.replace(searchText, "<mark>"   searchText   "</mark>");
    el.innerHTML = marked;
  }
}

Я пытался добавить a while(window.find(searchText) перед if, но это не работает, кажется, что цикл выполняется только при первом появлении моего слова.

Заранее спасибо

Комментарии:

1. Обязательное предупреждение: window.find является нестандартным , используйте на свой страх и риск. Кроме того, это неправильный инструмент для этого, поскольку он возвращает логическое значение.

2. Можете ли вы предоставить codesandbox.io это повторяет его?

3. Почему вы хотите это сделать?

4. @Jared: звучит разумно, но, похоже, это изобретает колесо «ctrl F». Это не обязательно плохо и может быть хорошим опытом обучения, но это кажется немного излишним, особенно когда — как вы уже упоминали — используется неправильный инструмент.

5. Это звучит как проблема XY . Если вы являетесь владельцем веб-страницы, почему бы просто не изменить разметку перед ее отображением?

Ответ №1:

Если вы не используете регулярное выражение, то оно заменит только первое вхождение, вы можете попробовать это, также измените регулярное выражение в соответствии с вашими потребностями.

 highlightText: function(urlParams) {
  var urlSearch = window.location.search;
  var urlParams = new URLSearchParams(urlSearch);
  var searchText = urlParams.get('search');
  if (window.find(searchText)) {
    var el = document.getElementById('collection-content');
    text = el.innerHTML;
    marked = text.replace(
      RegExp(`(${searchText})`),
      "<mark>"   searchText   " </mark>");
    el.innerHTML = marked;
  }
}

Примечание: совпадение чувствительно к регистру