从HTML字符串中移除div及其内容

Question

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

<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是什么，都可以计算括号数量，直到找到“< / div>”。问题在于“div3”也以“< / div>”结尾。

我要删除的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/

- Koiski

---

你不需要费太多力气来完成这个任务 :) 只需使用 jQuery 的 .remove() 功能即可。 - dreamweiver

使用正则表达式解析HTML会让你发疯。你可以使用DOMParser并从中删除div。 - user2000008

jQuery是为此目的而开发的。少写，多做。当你使用jQuery时，充分利用它。 - dreamweiver

Answer 1

只需将字符串放入jQuery中并使用find和remove函数即可。

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

- Patrick Evans

---

var htmlText = editor3.getValue(); var jHtmlObject = jQuery(htmlText); var newHtml = jHtmlObject.find("#div1").remove(); console.log(newHtml); 出现以下错误： Uncaught Error: 语法错误，无法识别的表达式：<div id="div1"></div> - Koiski

删除方法不会返回新字符串，你需要使用 jHtmlObject.html(); 获取 HTML。 - Patrick Evans

那么我该如何将它放入一个字符串中呢？ var newHtml = jHtmlObject.html(); 结果还是报了同样的错误.. - Koiski

请确保字符串开头有一个开始标签，没有空格、单词等，它必须是一个标签元素，否则 jQuery 将无法将其视为 HTML。 - Patrick Evans

好的，当我删除了空格后没有出现错误，但是console.log(newHtml)没有返回任何内容... - Koiski

忘记了你必须先将代码添加到父项中才能获得正确的功能。 - Patrick Evans

Answer 2

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

例如：$('#div2').remove();

如果它不是DOM的一部分，并且您将其存储在字符串中，您可以执行以下操作：

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

- itsmejodie

Answer 3

jQuery的.remove()方法就可以。

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

- Jude Duran

Answer 4

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

- Joe