jquery - 使用 jquery.parseHTML() 解析 html 字符串，更改数据并返回字符串

Question

我正在使用 jquery parseHTML 加载到 DOM 中，然后搜索关键字并在其周围放置一个带有类的 span 标记，然后希望将其返回到字符串中并插入到主字符串中

    var mainStr = '<div>... a long html ...</div>'

以下是 html 主字符串的一部分。我有一个位置，在进行一些更改后，我会将其插入主字符串中。

    var str ='<span></span> Here is <a href="someurl">xxxxx </a> a presentation of certain statements';

    var myHtml = $.parseHTML(str);
   var keyword = 'presentation'.
   $.each(myHtml, function (i, el) {
   if (el.nodeName == '#text') {
      var loc = el.nodeValue.search(keyword);
   if(loc >0)
      el.nodeValue = el.nodeValue.replace(keyword, "<span class='redColor'>" + keyword + "</span>");
     });

问题是如何将 myHtml 对象作为字符串返回，例如:

 <span></span> Here is <a href="someurl">xxxxx </a> a <span class="redColor">presentation</span> of certain statements'

插入到mainHtml字符串中。

感谢您的帮助。

Answer 1

您不应该使用 html 内容更新文本节点的节点值，它不会被解析。

相反，您可以使用更新后的 html 结构替换文本节点，例如

var str = '<span></span> Here is <a href="someurl">xxxxx </a> a presentation of certain statements';
var keyword = 'presentation';
var myHtml = $('<div />', {
  html: str
});

myHtml.contents().contents().addBack().each(function() {
  if (this.nodeType == Node.TEXT_NODE) {
    var loc = this.nodeValue.search(keyword);
    if (loc > 0) {
      var $tmp = $('<div />', {
        html: this.nodeValue.replace(keyword, "<span class='redColor'>" + keyword + "</span>")
      })
      $(this).replaceWith($tmp.contents());
    }
  }
})
var html = myHtml.html();
$('#result').text(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>