从 html 字符串中删除 div 及其内容答案

【问题标题】：Remove div and its content from html string从 html 字符串中删除 div 及其内容
【发布时间】：2013-06-05 12:43:33
【问题描述】：

假设我有一个这样的字符串：

<div id="div1"></div>
<div class="aClass" id="div2">  
   <div id="div3" class="anotherClass"></div>
   <div id="div4" />
</div>
<div id="div5"></div>

我想从字符串中删除 div2 以及该 div 中的所有内容

所以我得到了这样的字符串

<div id="div1"></div>
<div id="div5"></div>

我想使用正则表达式来查找第一个 id 为“div2”的 div 或任何 div 的 id 并计算括号直到它到达“”。问题是“div3”最后也有一个“”。

我要删除的 div 的内容也可能包含更多或更少的 div。

关于如何编码的任何想法？

更新：

                var htmlText = editor3.getValue();
            var jHtmlObject = jQuery(htmlText);
            jHtmlObject.find("#div2").remove();
            var newHtml = jHtmlObject.html();
            console.log(newHtml);

为什么这不会在控制台中返回任何内容？

更新2！：我制作了一个 jsFiddle 来使我的问题可视化.. http://jsfiddle.net/WGXHS/

【问题讨论】：

你不需要费力就可以做到这一点:) 只需使用 jquery 中的.remove() 功能。
使用正则表达式解析 HTML 将 make you go insane。 You could use DOMParser 并从那里删除 div。
Jquery 的开发本身就是为了这个缘故。 少写，多做。当您使用 jquery 时，请充分利用它

标签： javascript jquery html regex

【解决方案1】：

只需将字符串放入 jQuery 并使用 find 然后删除即可。

var htmlString = '<div id="div1"></div>\
<div class="aClass" id="div2">\ 
   <div id="div3" class="anotherClass"></div>\
   <div id="div4" />\
</div>\
<div id="div5"></div>';

var jHtmlObject = jQuery(htmlString);
var editor = jQuery("<p>").append(jHtmlObject);
editor.find("#div2").remove();
var newHtml = editor.html();

【讨论】：

var htmlText = editor3.getValue(); var jHtmlObject = jQuery(htmlText); var newHtml = jHtmlObject.find("#div1").remove();控制台.log(newHtml);收到此错误：未捕获错误：语法错误，无法识别的表达式：
remove 不会返回新字符串，您必须执行 jHtmlObject.html(); 才能获取 html。
那么我如何把它放在一个字符串中呢？ var newHtml = jHtmlObject.html();给了我同样的错误..
确保字符串的最开始有一个开始标签，没有空格或单词等它必须是一个标签元素，否则jquery不会将它视为html。
jsfiddle.net/WGXHS/4 忘记了您必须先将代码添加到父项才能获得正确的功能。

【解决方案2】：

如果您可以访问 jQuery 并且您的 HTML 是 DOM 的一部分，您可以使用 $.remove()

EG。 $('#div2').remove();

如果它不是 DOM 的一部分，并且你将它放在一个字符串中，你可以这样做：

$('#div2', $(myHTML)).remove();

【讨论】：

【解决方案3】：

jQuery .remove() 会做

$("#div2").remove();

【讨论】：

【解决方案4】：

如果您控制生成字符串，则正则表达式选项将起作用，这样您就可以确保属性的顺序和缩进等内容。如果不是，最好的办法是使用 HTML 解析器。如果您在浏览器内部工作，jQuery 是一个不错的选择。如果您在服务器端工作，则需要为您选择的语言找到一个解析器。

【讨论】：