Поиск слова и выделение

133

04 сентября 2019, 14:20

Натолкнулся на такую проблему, при поиск слова в тексте, выделяется только первое. Подскажите как сделать что бы алгоритм выделял все слова в тексте.

function search() { 
  var words = search_words.value 
  words = words.replace("<", ""); 
  words = words.replace(">", ""); 
  var text = document.getElementById('container').innerHTML 
  var result = text.replace(words, "<div style='color:Red; display:inline;'>" + words + "</div>"); 
  document.getElementById('container').innerHTML = result; 
}

<body> 
  <div id="container"> 
    <span> 
        Картошка similique cum ut Картошка non quo porro saepe rerum. Numquam iste nostrum voluptatem qui Картошка facere 
        nostrum 
        Картошка. Картошка laborum et facere odit ratione Картошка vel hic et. Itaque Картошка esse eius. Perferendis 
        nisi Картошка. Sunt est Картошка Картошка officiis Картошка et ut consequatur dolorem. 
    </span> 
    <span> 
        Картошка similique Картошка ut est non quo porro saepe rerum. Numquam iste Картошка voluptatem qui veniam Картошка 
        nostrum 
        numquam. Autem Картошка et facere odit Картошка repellendus vel hic et. Itaque consequatur esse eius. Perferendis 
        nisi dolorem. Sunt est Картошка voluptas officiis rerum et ut consequatur dolorem. 
    </span> 
  </div> 
  <input type="text" id="search_words" value="Картошка" disabled> 
  <button onclick="search()">Поиск</button>

Answer 1

Для примера:

var lastResFind = ""; 
var copy_page = ""; 
 
function TrimStr(s) { 
  s = s.replace(/^\s+/g, ''); 
  return s.replace(/\s+$/g, ''); 
} 
 
function FindOnPage(inputId) { 
  var obj = window.document.getElementById(inputId); 
  var textToFind; 
 
  if (obj) { 
    textToFind = TrimStr(obj.value); 
  } else { 
    alert("Введенная фраза не найдена"); 
    return; 
  } 
  if (textToFind == "") { 
    alert("Вы ничего не ввели"); 
    return; 
  } 
 
  if (document.body.innerHTML.indexOf(textToFind) == "-1") 
    alert("Ничего не найдено, проверьте правильность ввода!"); 
 
  if (copy_page.length > 0) 
    document.body.innerHTML = copy_page; 
  else copy_page = document.body.innerHTML; 
 
 
  document.body.innerHTML = document.body.innerHTML.replace(eval("/name=" + lastResFind + "/gi"), " "); 
  document.body.innerHTML = document.body.innerHTML.replace(eval("/" + textToFind + "/gi"), "<a name=" + textToFind + " style='background:red'>" + textToFind + "</a>"); 
  lastResFind = textToFind; 
  window.location = '#' + textToFind; 
}

<input type="text" id="text-to-find" /> 
<input type="button" onclick="javascript: FindOnPage('text-to-find'); return false;" value="Search" /> Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium voluptas accusamus quasi reprehenderit ducimus autem labore, facere neque natus 
esse! Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium voluptas accusamus quasi reprehenderit ducimus autem labore, facere neque natus esse!Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium voluptas accusamus quasi 
reprehenderit ducimus autem labore, facere neque natus esse!

Answer 2

Для глобального поиска replace в качестве первого параметра нужно передавать не строку, а регулярное выражение с флагом g. Сейчас вы передаете строку, поэтому находит только первое совпадение.

function search() { 
  var words = search_words.value 
  words = words.replace("<", ""); 
  words = words.replace(">", ""); 
  var text = document.getElementById('container').innerHTML 
  var result = text.replace(new RegExp(words,'g'), "<div style='color:Red; display:inline;'>" + words + "</div>"); 
  document.getElementById('container').innerHTML = result; 
}

<body> 
  <div id="container"> 
    <span> 
        Картошка similique cum ut Картошка non quo porro saepe rerum. Numquam iste nostrum voluptatem qui Картошка facere 
        nostrum 
        Картошка. Картошка laborum et facere odit ratione Картошка vel hic et. Itaque Картошка esse eius. Perferendis 
        nisi Картошка. Sunt est Картошка Картошка officiis Картошка et ut consequatur dolorem. 
    </span> 
    <span> 
        Картошка similique Картошка ut est non quo porro saepe rerum. Numquam iste Картошка voluptatem qui veniam Картошка 
        nostrum 
        numquam. Autem Картошка et facere odit Картошка repellendus vel hic et. Itaque consequatur esse eius. Perferendis 
        nisi dolorem. Sunt est Картошка voluptas officiis rerum et ut consequatur dolorem. 
    </span> 
  </div> 
  <input type="text" id="search_words" value="Картошка" disabled> 
  <button onclick="search()">Поиск</button>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Ошибка при создании формы регистрации

Пытаюсь сделать форму регистрации на сайте, но получаю ошибку

120

javascript

Disabled на js? [закрыт]

Подскажите, нужно сделать на чистом js чтобы нечто вроде корзинки, а именно при нажатии на кнопку у нее был thissetAttribute("disabled", "disabled"), а по нажатию...

150

javascript

Найти Наименьший Делитель

Прохожу уроки на Hexlet и столкнулся с темой "итеративный процесс"Думаю, что в моем коде (см

128

javascript

Получить id строки с использованием jquery context menu

В приложении на aspnet mvc использую билиотеку jquery context menu

106