从 html 字符串中删除样式

Question

我有一个 HTML 字符串。它可以是任意数量的元素。我想删除任何包含字体大小的内联样式。

例如：

`<p><span style="font-size: 24px;">ORDER</span></p>`

我需要那个字体大小。我不太清楚如何使用 javascript 正则表达式来做到这一点。我可以寻求帮助吗？

Answer 1

编辑：

正如雷沃提到的：

你用的是JS。一种利用 DOM 的语言。

那么，为什么不利用它呢？

任何包含字体大小的内联样式都应该被删除

var myString = `
<p>
  <span style="font-size: 24px;">ORDER</span>
  <span style="color:blue">
    <b style="line-index:5px; font-size: 12px; margin: 5px">something</b>
  </span>
</p>
`;
var divElement = document.createElement('div');
divElement.innerHTML = myString;

// loop through ALL DOM elements insidie the divElement
var elements = divElement.getElementsByTagName("*");
for (var i = 0; i < elements.length; i++) {
  // remove the style attribute enterily if it contains font-size property
  if ((elements[i].getAttribute('style') || '').includes('font-size')) {
    elements[i].removeAttribute('style');
  }
}

// here is your font-size free string 
console.log(divElement.innerHTML)

如果我们只想获取字体大小数字，那么我们可以从以下表达式开始：

(?:font-size:\s+)([0-9]+)(?:.+?")

在这里，我们添加(?:font-size:\s+)一个非捕获组作为左边界，然后收集所需的数字，并使用另一个非捕获组([0-9]+)向上滑动到第一个数字。"(?:.+?")

如果我们想要其他输出，我们可以简单地修改/更改这三个捕获和非捕获组。

演示版

(?:font-size:\s+)([0-9]+)(?:.+?")

如果我们想删除样式标签及其中的所有内容，则此表达式可能有效：

(style=".+?")

演示版

const regex = /(?:font-size:\s+)([0-9]+)(?:.+?")/gm;
const str = `"<div style="color: red;"><p style="font-size: 12px">Stuff</p></div>"`;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}