“jQuery的方式”使用HTML和文字的组合，以取代只是一个文本节点？(“jQuery way”

在我的网页浏览器userscript项目，我需要更换只有一个文本节点，而不会影响作为文本相同的父节点下的其他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(我新的东西+的东西，我不想改变) 。 另外请注意，我想保留原始的空间，这对自己似乎是棘手。

我想什么在这里请问专家是 ： 有一个最地道的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

您可以添加其他节点类型，如果你不想删除特定nodetypes 检查FIDDLE

Answer 3:

尝试this..edited版本

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

文章来源: “jQuery way” to replace just a text node with a mix of HTML and text?