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结构替换文本节点，如

＆＃13;

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);

＆＃13;

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

＆＃13;

使用jquery.parseHTML（）解析html字符串，更改数据并返回字符串

1 个答案: