CODEWITHSUNDEEP
htmlregex
user2316117
user2316117

Reputation: 75

Regular Expression for targeting all line-height inline styles in html document

I have a bunch of HTML articles on a Joomla based website that for better or worse (mostly worse :) have a bunch of inline styles in them. I want to remove all the inline styles that are associated with line-height as these are variant and makes the formatting ugly.

Most of these are in the format of line-height: 1.15; or 1.35; or what have you but some are line-height: normal;

Is there a regular expression that I could use to target every line-height style regardless of what comes between the : and ; in the expression. As this could technically be set to normal, a number, a length, a percentage, initial, or inherit. Here is an example where I would want to target line-height:1.15; and remove it using a find and replace tool:

<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>

Thank you.

Upvotes: 1

Views: 384

Answers (2)

Adam Katz
Adam Katz

Reputation: 16226

Direct regex-only answer:  To remove all inline line-height styles in an s/// regex substitution:

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

That said, there are more elegant solutions.

If you're using CSS, you can override the style using a CSS3 attribute substring selector:

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

(Note, this won't work if the inline style is !important.)

If you're using Javascript, you can merely insert the above CSS. With Greasemonkey, use GM_addStyle(). Otherwise, do it manually:

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);

This has the advantage of working for dynamically added content (and it's computationally cheaper).

If you want to do other operations with these elements in Javascript, try 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]
}

Upvotes: 1

SerCrAsH
SerCrAsH

Reputation: 450

Code :

<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>

Regex : 

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

Output:

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

Upvotes: 1

Related Questions