使用 javascript/jquery 从字符串元素中删除内联样式答案

【问题标题】：Remove inline style from string element using javascript/jquery使用 javascript/jquery 从字符串元素中删除内联样式
【发布时间】：2018-11-27 14:29:29
【问题描述】：

假设我有这个字符串：

let string = '<h1 style="lots of class"> </h1><h2> <p style="bunch of class"> </p> <p style="bunch of class"> </p></h2>';

所以基本上它是一堆这样的元素，但在字符串中：

<h1 style="bunch of class"> </h1>
<h2> 
  <p style="bunch of class"> </p>
  <p style="bunch of class"> </p>
</h2>

使用 jquery 或 vanilla javascript，如何从字符串中删除样式属性？

这个我已经试过了：

$(string).find('h1').removeAttr('style');

但它不起作用

【问题讨论】：

您需要删除所有样式还是只删除h1 样式？
@KoshVery 所有元素的所有样式。基本上我真正想要的是所有元素的香草版本，没有任何属性或样式，只是纯粹的骨架。
我已经更新了我的答案以帮助您去除任何属性。

标签： javascript jquery html regex

【解决方案1】：

这里有两个潜在的问题。首先，您需要从string 创建一个jQuery 对象并保存对它的引用。如果不这样做，您将丢失对 HTML 所做的更改。

其次，您需要使用filter() 而不是find()，因为没有单一的根级别在 HTML 字符串中搜索的节点。试试这个：

let string = '<h1 style="color: red;">H1 Foo</h1><h2 style="color: yellow;">H2 Foo<p style="color: green;">P Foo</p><p style="color: blue;">P Foo</p></h2>';

let $string = $(string);
$string.filter('h1').removeAttr('style');
$('body').append($string);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

我喜欢其次。不知道要过滤这种方式。
你的回答太棒了，我快到了。只是添加另一个问题，我如何也删除 h2 内 p 元素的样式？我试过做 $string.filter('h2 p').removeAttr('style');但没用
你需要filter() 来获得h2，然后find() 里面的p：$string.filter('h2').find('p').removeAttr('style');

【解决方案2】：

您可以做的是，在代码中创建一个虚拟元素并将内容放入其中。然后找到元素并删除属性：

let str = '<h1 style="lots of class">h1</h1><h2> <p style="bunch of class"> h2 > p</p> <p style="bunch of class"> h2 > p </p></h2>';

let $div = $('<div>')
$div.html(str).find('h1').removeAttr('style');

$(document.body).append($div.html())

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

如果您需要从字符串中删除所有样式，您可以这样做：

let string = '<h1 style="color: red;">H1 Foo</h1><h2 style="color: yellow;">H2 Foo<p style="color: green;">P Foo</p><p style="color: blue;">P Foo</p></h2>';

$('<div>' + string + '</div>')
  .find('[style]').attr('style', null)
  .appendTo('body');

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

更新
为了给您真正想要的，我编写了以下 jQuery 扩展。
它会从 html 片段中删除所有属性，除了您想要保留的属性。
可应用于 jQuery 对象。
需要保存一组属性（可选）。
像 jQuery html() 方法一样返回 html 字符串。

$.fn.extend({
  stripHTML: function(keep = []) {        
    return $('<div>')
      .append(this)
      .find('*').each(function(i, e) {
        for (var {name} of [...e.attributes]) {
          if (!keep.includes(name)) e.removeAttribute(name);
        }
      })
      .end()
      .html();
  }
});

let string = '<h1 Title="h1" style="color: red;">H1 Foo</h1><h2 style="color: yellow;">H2 Foo<p style="color: green;">P Foo</p><p style="color: blue;" >P <a href="foo">Foo</a></p></h2>';

let keep = ['href', 'name', 'value']; // attrs to keep

let stripped = $(string).stripHTML(keep);

$('body').html(stripped);

console.log(stripped);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

这是我接受的答案，因为这正是我所需要的；删除所有元素及其子元素上的所有样式。但是如果其他人会遇到这个问题，@Rory McCrossan 的答案效果很好，但是你必须从它的父元素中过滤所有其他子元素。
@Daniel 如果你想使用这个逻辑，我强烈建议避免使用* 选择器，因为它不必要地慢。请改用[style]。
@RoryMcCrossan，进步很大！谢谢，我已经更新了答案。

【解决方案4】：

我们可以通过正则表达式来实现。

const string = '<h1 style="lots of class"> </h1><h2> <p style="bunch of class"> </p> <p style="bunch of class"> </p></h2>';
const stringNoStyle = string.replace(/style="(.*?)" /g, '')
// <h1> </h1>
// <h2>
//    <p> </p>
//    <p> </p>
// </h2>

【讨论】：

【解决方案5】：

创建一个div 并将字符串插入其中的innerHTML。然后选择h1 并从中删除style。

var string = '<h1 style="color:red">h1</h1><h2 style="color:red">h2</h2>';
var div = document.createElement("div");
div.innerHTML = string;
div.querySelector("h1").removeAttribute("style");
document.body.append(div)

【讨论】：