Заменяя соответствует строке с другим

Question

Я пытаюсь создать форму поиска, чтобы найти разыскиваемый шаблон в HTML-тегах, как р, пролет и т.д., так же как и Ctrl + F вариант браузера.

Javascript:

function searchKeyword(){ 
     var keyword = document.searchform.searchbox.value; 
     $("#paragraph").each(function() { 
      var string = $(this).text(); 
      newstring = string.replace(keyword, '<span style="background-color: #faf701;">'+keyword+'</span>'); 
      $(this).text(newstring); 
     }); 
    } 

Единственная проблема заключается в том, что не читает строку как HTML-разметки, но в виде простой строки и выводит именно:

<span style="background-color: #faf701;">'+keyword+'</span> 

Вместо выделенная строка.

Answer 1

потому что вы используете .text(), так как вы хотите, чтобы сделать содержание HTML использовать .html()

$(this).html(newstring); 

---

Поскольку у вас есть селекторе, нет необходимости использовать .each()

function searchKeyword() { 
    var keyword = document.searchform.searchbox.value; 

    $("#paragraph").html(function (i, html) { 
     return $(this).text().replace(keyword, '<span style="background-color: #faf701;">' + keyword + '</span>'); 
    }) 
} 

---

Используйте регулярное выражение для замены нескольких матчей

function searchKeyword() { 
    var keyword = document.searchform.searchbox.value; 
    var regex = new RegExp(RegExp.escape(keyword), 'g') 

    $("#paragraph").html(function (i, html) { 
     return $(this).text().replace(regex, '<span style="background-color: #faf701;">' + keyword + '</span>'); 
    }) 
} 


if (!RegExp.escape) { 
    RegExp.escape = function (value) { 
     return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&") 
    }; 
}