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

时间:2012-04-17 10:37:02

标签: javascript css regex styles

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

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

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

我是否可以使用正则表达式来匹配有效的样式字符串,或者像使用正则表达式解析html一样,这对于正则表达式来说通常难以执行吗?

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

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

4 个答案:

答案 0 :(得分:1)

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

但是,您必须满足这样的情况,其中属性用引号括起来。

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

应匹配HTML属性语法的所有产品。但是,请确保点匹配所有字符,包括正则表达式引擎中的换行符(因此为/s)。我还使用了非贪心量词*?。这些也可能没有实现。

style=的特殊情况没有任何后续值,上面没有表示以保持简单。

答案 1 :(得分:0)

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

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

http://jsfiddle.net/DULyx/3/ - 点击此处

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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
}