javascript - 将 HTML 字符串转换为 Jquery，进行操作并转换回字符串

Question

我在这方面遇到了很大的问题，基本上我有一个从服务器(Ajax)收到的字符串。该字符串可能有也可能没有 anchor 链接。它也可能有很多。我需要获取这个字符串，找到所有 anchor 链接，更改 href，然后在屏幕上输出结果。为此，我有以下我认为可行的代码。这是我迄今为止所得到的最接近的结果:

  result.origText = "some random text <a href=\"http://www.abc.com\">random link</a>"

经过多次尝试和错误，我终于想出了以下代码:

  var origText = $(result.origText);                            
  origText.filter("a").each(function () {
      var href = $(this).attr("href");
      $(this).attr("href", href + '#ref=' + Num); //Num is currently = 12345
  });
  finalText = origText[0].outerHTML;

finalText 然后包含:

  <a href="http://www.dermapoise.com#ref=12345">random link</a>

并且我丢失了所有未包含在任何标签中的其他文本。我怎样才能存档这个？

更新:可以使用以下输入字符串:

  "some random text <a href=\"http://www.abc.com\">random link</a> some more text <a href=\"http://www.abc2.com\">random link2</a> Even more text <a href=\"http://www.abc.com\">random link3 with the same href</a>" 

Answer 1

这是因为当 jQuery 尝试解析给定的文本时，它会尝试将其解析为选择器，而不是 html 内容 - 它会抛出错误 Uncaught Error: Syntax error, unrecognized expression: some random text <a href="http://www.abc.com">random link</a>

由于在顶层有文本节点，因此最好在其周围包装另一个容器，然后根据需要修改内容，然后获取容器的内部内容

var origText = $('<div />').html(result.origText);
origText.find("a").attr('href', function (idx, href) {
    return href + '#ref=' + Num
});
finalText = origText.html();