Выделить найденную подстроку [дубликат]

303

06 июля 2017, 04:19

На данный вопрос уже ответили:

Подсвечивание текста при вводе 3 ответа

Подскажите, пожалуйста, как выделить найденную подстроку. Есть текст, я ввожу в поле значение, которое хочу найти и нужно найденные совпадения выделить жирным, что, собственно не получается. Я в этом деле новичок, вот пример кода

<input type="text" name="find" id="find" value="" onchange="show()"> 
<button type="button" onclick="show()">Нажать</button> 
<br/> 
<br/> 
<div id="text" style="width:400px;"> 
Lorem ipsum dolor sit amet, ne pro exerci suavitate. Ea amet appareat adversarium mei. Ei suscipit salutandi molestiae cum, eam te feugiat eruditi quaerendum. Denique indoctum urbanitas ne nec, ius putent aliquid laoreet ad, admodum hendrerit qui ut. Pro labore luptatum ad. Et cum nonumy adolescens, te harum salutatus vis. Semper delicatissimi ei mea. 
</div> 
 
<script type="text/javascript"> 
 
  function show () { 
    var word = document.getElementById("find").value; 
    var text = document.getElementById("text").innerHTML; 
    var i = 0; 
    do { 
      var x = text.indexOf(word, i); 
      i = x + 1; 
      alert (x) // вывел чтобы смотреть результат 
 
    } while (x != -1) 
 
  } 
 
</script>

Спасибо

Answer 1

var oldText = null; 
 
function show() { 
  var word = document.getElementById("find").value; 
  var text = document.getElementById("text").innerHTML; 
 
  if (!oldText) 
    oldText = text; 
 
  var newText; 
 
  if (false) { // using String.split/Array.join 
    var parts = oldText.split(word); 
    console.log("count = " + (parts.length - 1)); 
    newText = parts.join("<b>" + word + "</b>"); 
  } else { // using String.replace 
    newText = oldText.replace(new RegExp(word, "g"), "<b>" + word + "</b>"); 
  } 
 
  document.getElementById("text").innerHTML = newText; 
}

<input type="text" name="find" id="find" value="" onchange="show()"> 
<button type="button" onclick="show()">Нажать</button> 
<br/> 
<br/> 
<div id="text" style="width:400px;"> 
  Lorem ipsum dolor sit amet, ne pro exerci suavitate. Ea amet appareat adversarium mei. Ei suscipit salutandi molestiae cum, eam te feugiat eruditi quaerendum. Denique indoctum urbanitas ne nec, ius putent aliquid laoreet ad, admodum hendrerit qui ut. 
  Pro labore luptatum ad. Et cum nonumy adolescens, te harum salutatus vis. Semper delicatissimi ei mea. 
</div>