2

假设我有这个字符串：

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

但它不工作

4

5 回答 5

3

这里有两个潜在的问题。首先，您需要创建一个 jQuery 对象string并保存对它的引用。如果您不这样做，您将丢失对 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);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

于 2018-11-27T14:34:46.707 回答
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())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

于 2018-11-27T14:36:33.943 回答
1

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

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>
于 2018-11-27T14:49:46.803 回答
1

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

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');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

更新
为了给你你真正想要的，我写了下面的 jQuery 扩展。
它从 html 片段中删除所有属性，除了您要保留的那些。
可以应用于 jQuery 对象。
需要一组 attrs 来保留（可选）。
像 jQueryhtml()方法一样返回 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);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

于 2018-11-27T15:00:40.640 回答
0

创建一个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)

于 2018-11-27T14:42:11.823 回答