JavaScript.replace()，删除标签和内容答案

【问题标题】：JavaScript.replace(), To Remove Tag and ContentsJavaScript.replace()，删除标签和内容
【发布时间】：2012-11-11 22:41:43
【问题描述】：

我有一个标签，里面有一些真实的内容。我希望能够使用 javascript srt.replace() 删除该标签及其所有内容。

我通常会使用 jQuery('.tag-class').remove() 之类的东西，但在这种情况下，jQuery 不是一个选项。

我相信一个正则表达式是我正在寻找的，但经过一段时间的探索，我并没有比开始时更接近。

我需要这样做。

var myContent = 'bla bla bla <div class="remove-me">variable content here</div> something something';
// run some cool replace() here and get
// bla bla bla  something something

任何建议都会很棒！

【问题讨论】：

要添加的一件事...此内容存在于内容编辑器中，这可能会随意使用标签...例如将自己的标识符添加到有问题的 div 中。所以 '
' 也可能是 '
'。
那么为什么不将其添加到问题中而不是将其作为评论发布呢？
用正则表达式解析 HTML 是widely regarded as a bad idea.。您可能想查看一些other options。特别是this answer.
您的问题左下角有一个little edit link。您可以使用它为您的帖子添加更多信息。
@100pwd：为什么 jQuery 不是一个选项？特别是因为它们是内容编辑器中的元素，DOM 方法应该优先于 html-string-processing。

【解决方案1】：

如果场景是这样的，你可以简单地使用 vanilla JavaScript DOM 修改：

HTML：

<div id="abc">bla bla bla <div class="remove-me">variable content here</div> something something</div>

JavaScript：

var container = document.getElementById("abc"),
    items = container.getElementsByClassName("remove-me"),
    i = 0,
    len = items.length;

for( ; i < len; i++ ) {
    items[i].parentNode.removeChild(items[i]);
}

或者如果你想去掉所有的 HTML 标签：

var container = document.getElementById("abc");

container.innerHTML = container.innerHTML.replace(/(<([^>]+)>)/ig,"");

【讨论】：

【解决方案2】：

不要使用正则表达式来修改 HTML。

HTML 被设计为由解析器解析，正则表达式（本身）不擅长解析文档标记。最好将 HTML 作为 DIV 或类似元素的 innerHTML 插入，然后使用 DOM 方法修改内容。

然后您可以将 DIV 的内容作为节点插入到文档中，或者获取 innerHTML 并将其插入。

例如

function removeElementsFromMarkup(markup, selector) {
  var el = document.createElement('div');
  el.innerHTML = markup;
  var nodes = el.querySelectorAll(selector);

  for (var i=0, iLen=nodes.length; i<iLen; i++) {
    node = nodes[i]
    if (node.parentNode) {
      node.parentNode.removeChild(node);
    }
  }
  return el.innerHTML;
}


alert( removeElementsFromMarkup(
  '<div>foo<div class="remove-me">bar</div></div>', '.remove-me') // <div>foo</div>
);

以上使用 querySelectorAll，但您应该使用适合的任何选择方法。如果可以完成这项工作，请选择最低公分母（例如 getElementsByTagName）。

如果你展示一个你正在尝试做的事情的真实例子，你会得到更具体（并且可能更有用）的答案。

【讨论】：

【解决方案3】：

var myContent = 'bla bla bla <div class="remove-me">variable content here</div> something something';
myContent = myContent.replace(/<div[\s\w"\=-]*class="remove-me"[\s\w"\=-]*>[\s\w]*<\/div>/g, "");
alert(myContent);

https://jsfiddle.net/umL1tswn/

【讨论】：

这仅在您没有重叠的 div 元素时才有效。如果你有它们，正则表达式是不够的
我对上面的代码做了一个简单的编辑，它就像一个魅力......你有 [\s\w"\=-]* 介于两者之间，我把它换成了 [ ^>]*. 非常感谢！