移除所有以 'font-' 开头的内联样式属性

Question

如何删除所有以'font-'开头的内联样式属性？

<div style="font-size:3px;color:red;">
  <p style="font-size:5px;"></p>
</div>

OUTPUT

<div style="color:red;">
  <p style=""></p>
</div>

- Array out of bound

---

用 '' 替换 font-[^;]+;。 - hjpotter92

@hjpotter92：可能会泄漏到文档文本中。 "<em>字体相关</em>的决策应该留给设计师；他们最懂。" → "<em>他们最懂。" 普通正则表达式无法很好地解决这个问题。 - Amadan

Answer 1

虽然HtmlAgilityPack的回答看起来很不错，但试试这个更简单的代码：

var elements = document.querySelectorAll("[style*='font-']"),
    l = elements.length, i;
for( i=0; i<l; i++) {
    elements[i].style.cssText =
      elements[i].style.cssText.replace(/(^|;)\s*font-[^;]+/g,"");
}

- Niet the Dark Absol

Answer 2

一个无需使用库的解决方案:

var pattern = /^\s*font-/;
var styled = document.querySelectorAll('[style]');
[].forEach.call(styled, function(element) {
    var css = element.getAttribute('style');
    css = css.split(';').filter(function(rule) {
        return !pattern.test(rule);
    }).join(';');
    element.setAttribute('style', css);
});

基本上，循环遍历每个带有style属性的标签，将其拆分为单个规则以最小化溢出（仍然可能存在一些问题：background: url('boo;font-weight.png');被破坏；但是在几行代码中实现一个合适的解析器非常困难，这里的风险可以忽略），然后只选择不以font-开头的规则，并重建style属性。

编辑：Niet比我快1分钟，代码更紧凑。+1。

- Amadan

---

+1，因为你提供了正确的答案；）我刚刚编辑了我的答案，以允许任意空格，而你的答案支持但我的不支持。 - Niet the Dark Absol

@NiettheDarkAbsol：哈哈，谢谢。我特别羡慕在样式上过滤QSA的简单优化，具有font- :) - Amadan

Answer 3

我們無法使用正則表達式解析HTML，但我會試試看。

搜索：style=(.*)font-[^;]+; 替換為：style=\1 演示在這裡：http://regex101.com/r/gB6nF7/3 這個正則表達式可能對這種情況有所幫助，但不會走得太遠。

在其他情況下，您可以使用hjpotter建議的方法：

用''替換font-[^;]+;

- aelor

---

JavaScript不支持向后查找。 - hjpotter92

Answer 4

我建议使用HtmlAgilityPack而不是正则表达式。它真的很棒！正则表达式不是解析HTML的好方法。

- Giannis Grivas