JQuery простое предложение

Я пытаюсь сделать простой поиск слова jQuery на основе ввода текста текста и выделения текста. Как я могу сделать это для нескольких слов? Этот код работает только для одного символа.

Html

<input type="text"/>

<div>John Resig
    George Martin
    Malcom John Sinclair
    J. Ohn 
    Sample text
</div>

CSS

span {    
    background : red 
}

JS

$("input").keyup(function() {
     var mysearchword = $("input:text").val();    
     var word = mysearchword;
     $( "div:contains('"+word+"')" ).html(function(i,html) {
         var re = new RegExp(word,"g");
         return html.replace(re,'<span>'+word+'</span>')
     });
});

JsFiddle

Ответы

Ответ 1

Если у вас есть предопределенный набор элементов для таргетинга, то

var $para = $('.para')
$("input").keyup(function() {
  $para.find('span.highlight').contents().unwrap();
  var mysearchword = this.value.trim();
  if (mysearchword) {
    var re = new RegExp('(' + mysearchword.trim().split(/\s+/).join('|') + ')', "gi");
    $para.html(function(i, html) {
      return html.replace(re, '<span class="highlight">$1</span>')
    });
  }
});
span.highlight {
  background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" />
<div class="para">John Resig George Martin Malcom John Sinclair J. Ohn Sample text</div>

Ответ 2

Я немного изменил ваш код и смог добиться того, что вам нужно. Однако я не уверен в производительности.

Html

<input type="text" id="inputText" />
<div id="sampleText">
   John Resig George Martin Malcom John Sinclair J. Ohn Sample text
</div>

JS

$("input").keyup(function () {

   var mysearchword = $(this).val();
   var word = mysearchword;
   var textInDiv = $("#sampleText").text();
   if (textInDiv.indexOf(word) > 0) {
      var re = new RegExp(word, "g");
      $("#sampleText").html(textInDiv.replace(re, '<span>' + word +'</span>'));
   };
});