“jQuery方式”用HTML和文本的混合替换一个文本节点？

Question

在我的网络浏览器用户脚本项目中，我只需要替换一个文本节点，而不会影响与文本相同的父节点下的其他 HTML 元素。而且我需要用多个节点替换它：

<div id="target"> foo / bar; baz<img src="/image.png"></div>

需要成为：

<div id="target"> <a href="#">foo</a> / <a href="#">bar</a>; <a href="#">baz</a><img src="/image.png"></div>

我知道 jQuery 对文本节点的支持并不多。我知道我可以使用直接 DOM 调用而不是 jQuery。而且我知道我可以做类似$('#target').html(my new stuff + 我不想改变的东西)。另请注意，我想保留初始空间，这本身似乎很棘手。

我想在这里问专家的是，有没有最惯用的 jQuery 方法来做到这一点？

Answer 1

您基本上想用新内容替换第一个子节点（文本节点）。你需要http://api.jquery.com/replaceWith/

// Text node we want to process and remove
var textNode = $("#target").contents().first();
// Break the text node up
var parts = textNode.text().split(/\s/);
// Put links around them
var replaceWith = "";
for (var i =0; i < parts.length;i++) {
    replaceWith += "<a href='http://www.google.com'>"  + escapeHTML(parts[i]) + "</a> ";
}
// Replace the text node with the HTML we created
textNode.replaceWith(replaceWith);

function escapeHTML(string) {
  return string.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="target">example, handles escaping properly, you should see an ampersand followed by "amp;" here: &amp;amp; <img src="/foobar.png"></div>

http://jsfiddle.net/NGYTB/1/

Answer 2

试试这个方法

// nodeType = 1 corresponds to element node
   // You are filtering everything out other than that and 
   // removing the textnodes from it..
   // contents() will get everything including the text
    ​$('#target'​).contents().filter(function() {
        return this.nodeType != 1; 
    }).remove();

   // Then you are prepending the div with the html  that needs to 
   //  replaced with the text...
    $('#target').prepend('<a href="#">mixed</a> text <a href="#">and</a> HTML');
   // This makes sure you do not touch the initial img element inside the div

如果您不想删除特定的节点类型，可以添加其他节点类型 CHECK FIDDLE​

Answer 3

试试这个..编辑的版本

$('#target').html('<a href="#">mixed</a> text <a href="#">and</a> HTML' + $('#target').html());