Question

我在基于Joomla的网站上有一堆HTML文章，无论好坏（更糟糕的是:)都有一堆内联样式。我想删除所有与line-height相关联的内联样式，因为这些样式是变体并且使格式变得难看。

其中大多数都采用行高的格式：1.15;或1.35;或者你有什么，但有些是行高：正常;

是否有一个正则表达式，我可以使用它来定位每个行高样式，而不管：和;之间的内容是什么？在表达中。因为技术上可以设置为正常，数字，长度，百分比，初始或继承。这是一个我希望定位行高的示例：1.15;并使用查找和替换工具将其删除：

instance ToJSON MsgIn3 where
  toJSON (AttachMsg3 (Attach tel)) = object ["attach" .= (toJSON :: Attach)]

谢谢。

Answer 1

代码：

<li>
    <p dir="ltr" style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt; text-align: justify;"><span style="background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">Text to display</span>
    </p></li>
<li>
    <p dir="ltr" style="top: 30; line-height: 1.35; margin-top: 0pt; margin-bottom: 0pt; text-align: justify;"><span style="background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">Text to display</span>
    </p></li>

正则表达式：

line-height\: 1\.[13]5;

输出：

Match 1:    line-height: 1.15;      30      18
Match 2:    line-height: 1.35;     280      18

Answer 2

直接正则表达式答案：删除s///正则表达式替换中的所有内联行高样式：

s/(\sstyle=[\'\"])[^\'\">]+\bline-height:[^;\'\">]+;?/\1/g

也就是说，有更优雅的解决方案。

如果您使用的是CSS，则可以使用CSS3 attribute substring selector覆盖该样式：

[style*="line-height:"] { line-height:1!important; }

（注意，如果内联样式为!important，则无效。）

如果您使用的是Javascript，则只需插入上述CSS即可。使用Greasemonkey，使用GM_addStyle()。否则，请手动执行：

var my_css = '[style*="line-height:"] { line-height:1!important; }';
var my_style = document.createElement("style");
my_style.type = "text/css";
my_style.appendChild(document.createTextNode(my_css));
document.head.appendChild(my_style);

这有利于动态添加内容（并且计算上更便宜）。

如果您想在Javascript中对这些元素进行其他操作，请尝试querySelectorAll()：

var line_height_styled = document.querySelectorAll('[style*="line-height:"]');
for (var i = 0; i < line_height_styled.length; i++) {
  // do stuff to line_height_styled[i]
}

正则表达式，用于在html文档中定位所有行高内联样式

2 个答案: