0

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

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>

2 ответа 2

3

Для примера:

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!

1

Для глобального поиска 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.