正则表达式匹配 html 样式属性的有效值答案

【问题标题】：Regex to match valid values for html style attribute正则表达式匹配 html 样式属性的有效值
【发布时间】：2012-04-17 10:37:02
【问题描述】：

我正在从一些 html 中删除所有样式属性。我可以使用正则表达式

/style=("[^"]"|'[^']')/

但我想知道这是否效率低下（由于负匹配）。我也知道它容易受到可能包含引号的样式属性（例如背景图像）的影响。

是否有一个正则表达式我可以用来匹配有效的样式字符串，或者像用正则表达式解析 html 一样，这对于一个正则表达式来说是否太难执行？

*edit 这是（我认为）我正在抓取的 html 中最棘手的样式字符串

style="FONT-SIZE: 10pt; COLOR: black; FONT-FAMILY: 'Verdana','sans-serif'; mso-fareast-font-family: 'Times New Roman'"

【问题讨论】：

stackoverflow.com/questions/1732348/…
@Sibster 我知道这个问题和答案，但我的问题比这要窄得多
你可能想看看我更新的答案。
@wheresrhys 你也可以有不带引号的属性：style=font-weight:bold 是有效的。
@Boldewyn 如果由我来决定，根本不会有任何样式属性......但不幸的是，我不得不从第三方抓取 html，因此无法控制是否或者没有引号

标签： javascript css regex styles

【解决方案1】：

我不认为，否定匹配在每种情况下都很慢。毕竟，当您使用style= 提供起点时，无论如何都会将以下字节与模式进行比较。

但是，您必须满足这种情况，即属性不用引号括起来。

/style=(".*?"|'.*?'|[^"'][^\s]*)/s

应该匹配所有HTML属性语法的产生。但是，请确保点 匹配所有 字符，包括正则表达式引擎中的换行符（因此是 /s）。我还使用了非贪婪量词*?。这些也可能无法实现。

style= 有一个特殊情况，没有后面的值，为了简单起见，上面没有表示。

【讨论】：

【解决方案2】：

试试/ style\=[\"\']?([a-zA-Z0-9 \:\-\#\(\)\.\_\/\;\'\,]+)\;?[\"\']? /ig

它应该找到我知道的每一个样式属性。

http://jsfiddle.net/DULyx/3/ - 在这里查看

【讨论】：

urls 可能会被引用。
努力，但在style='FONT-FAMILY: "Verdana"' 上失败了。一般来说，我认为正则表达式必须采用/("[allvalidchars and ']+"|('[allvalidchars and "]+')/ 的形式以避免这种陷阱，这非常令人恼火，因为它意味着a）复制字符类或b）将其存储为字符串并且必须正确转义在连接并传递到 new RegExp() 之前。即便如此，它也很容易受到例如style='FONT-FAMILY: \'Verdana\''.
根据您建议的情况，没有正则表达式可以做到这一点。由于您要定义搜索规则 - css 编写者必须遵守规则。一旦脚本不遵循规则 - 你如何搜索它？

【解决方案3】：

您不应该将 HTML 作为字符串处理。在 JS 中你只需要elt.style='';。如果你有机会通过 XSLT 运行你的东西，那么它是单行的。

【讨论】：

【解决方案4】：

function trim (str) {
    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}

function getStyle(element){
    return parseRules(element.getAttribute('style'))
}

function parseRules(rules){
  var parsed_rules= {}
      rules.split(';').map(function(rule){
          return rule.split(':').map(function(rule,index){
            // HERE YOU CAN TRY TO CLEAN THE RULES
            return trim( rule )
          })
      }).filter( function(rule){
            // HERE YOU CAN TEST THAT THE RULE IS VALID
          return rule.length == 2 && ( (rule[0]!="") || (rule[1]!="") )
      }).forEach(function(rule){
        parsed_rules[rule[0]] = rule[1]
      })


  return parsed_rules
}

【讨论】：