Jquery：从字符串中剥离所有特定的 HTML 标记答案

【问题标题】：Jquery: Strip all specific HTML tags from stringJquery：从字符串中剥离所有特定的 HTML 标记
【发布时间】：2012-07-11 22:28:28
【问题描述】：

我有一个包含一串文本和html标签的变量，例如：

var temp = "<div>Some text</div><p>More text<span>here</span></p><p>Even more</p>";

我想删除某种类型的所有标签。例如，假设所有 p 和 span 标签。

这是我能想到的最好的：

var temp = "<div>Some text</div><p>More text<span>here</span></p><p>Even more</p>";
var $temp = $(temp);
$("p", $temp).replaceWith("foo");
alert($temp.html());  //returns "Some text"

我能找到的最接近的回答是 Nick Craver 的回答：strip span tags from string with jquery。

【问题讨论】：

已编辑问题：p 标签和 span 标签是我想要替换的。但这在未来可能会改变。

标签： jquery

【解决方案1】：

演示：http://jsfiddle.net/VwTHF/1/

$('span, p').contents().unwrap();

.contents() 将获取每个此类标签中的元素和文本，.unwrap 将删除包裹每个内容部分的元素。

根据您当前的方法，它看起来像这样：

var temp = "<div>Some text</div><p>More text<span>here</span></p><p>Even more</p>";
var $temp = $(temp);
$temp.find('span, p').contents().unwrap().end().end();

如果要继续定位原始对象，则必须使用.end() 清除过滤器。

【讨论】：

希望我没有误解你的问题。您只是想摆脱标签但保留文本吗？
是的，我只想删除某些标签并保留文本和所有其他标签。但我无法在这个例子中使用上述方法：[jsfiddle.net/nEFhA/]
@iammatthew2 它运行良好。您忘记包含 jQuery：jsfiddle.net/WPpqE（您必须在左侧的选项中指定要使用的框架）
确实如此 - 谢谢！现在如何针对包含在变量中的字符串运行它？我试过这个没有成功：jsfiddle.net/PgJnW
注意：.html() 只会返回元素的内容——只返回div 的内容。 .text() 将返回所有内容。 jsfiddle.net/VwTHF/1

【解决方案2】：

你可以试试jquery plugin HTML Clean。在他们提供的示例中：

$.htmlClean("<H1 class=\"header\"><P>Nested P Test</H1>", {format:true});

=> 
<h1>
        Nested P Test
</h1>

您可以用{removeTags:[p]} 替换特定标签，它仍然会呈现内容而不是标签。

【讨论】：

谢谢！我会试一试，但我认为 Jquery 只需几行代码就可以解决这个问题。

【解决方案3】：

我必须做类似的事情：阻止文本块包含除<b>、<i> 或 <u> 之外的任何 HTML 标记。这个问题和其他几个问题指向我自己的功能：

function cleanNonFormattingTags(htmlContents) {
    if (htmlContents && htmlContents.length) {
        var result = '';
        htmlContents.each(function () {
            var $child = $(this), type = $child.prop('tagName'), isTextNode = this.nodeName == "#text";
            if (isTextNode) {
                result += this.textContent;
            }
            else if (type == 'B' || type == 'U' || type == 'I' || type == 'BR') { // Allow only these types of tags
                var innerContent = cleanNonFormattingTags($child.contents());
                var $newTag = $(document.createElement(type)).html(innerContent);
                result += $newTag[0].outerHTML;
            }
            else {
                result += cleanNonFormattingTags($child.contents());
            }
        });
        return result;
    }
    return htmlContents.text();
}

希望这会有所帮助！

【讨论】：

【解决方案4】：

我会跟进@nbrooks，因为他的回答非常接近您想要的，但不完全是。 @nbrooks 通过指出 html() 为您提供了包装在标签中的数据，从而找到了解决方案。因此，解决方案是将 HTML 包装在标签中。这应该可以为您解决问题：

var temp = "<div>Some text</div><p>More text<span>here</span></p><p>Even more</p>";
$("<span>" + temp + "</span>").find('span,p').
  contents().unwrap().end().end().html()`

有关示例，请参阅 http://jsfiddle.net/18u5Ld9g/1/。

作为更一般的功能：

function stripTags(html, tags) {
  // Tags must be given in CSS selector format
  return $("<span>" + html + "</span>").find(tags).
    contents().unwrap().end().end().html();
}

【讨论】：