Javascript regex For Removing height/width from style

Question

Using HTMLFilter addrules in CKEDITOR, I'm trying to remove the height/width from the STYLE of plain text.

They don't return the actual object just plain text style so I really can't use jQuery or other DOM manipulation tools.

I have the below regex code that successfully removes HEIGHT and WIDTH but still leaves the actual dimensions.

I'm new to regular expressions so I'm sure it's something rather simple. Just not sure what.

Thank you.

var str = "width:100px;height:200px;float:left;";
var regex = /(height|width):(?=(.*?);)/gi;
console.log(str.replace(regex,""));

Replace`(?=(.*?);)` with `.*?;` or `[^;]*;`. You used a lookahead, and it is a non-consuming pattern, i.e. the text it matches does not become part of the whole match value. Thus, it does not get removed. — Wiktor Stribiżew, Jan 14 '19 at 17:20
@WiktorStribiżew if you add that as an answer I will accept it. You were first to solve my problem and described why. — imvain2, Jan 14 '19 at 17:24

score 2 · Accepted Answer · answered Jan 14 '19 at 17:26

2

You used a lookahead, and it is a non-consuming pattern, i.e. the text it matches does not become part of the whole match value. Thus, it does not get removed

Use a pattern like

/(?:height|width):[^;]*;/gi

See the regex demo.

Details

(?:height|width) - a non-capturing group matching either height or width
: - a colon
[^;]* - a negated character class matching 0+ chars other than ;
; - a semi-colon.

See JS demo:

var str = "width:100px;height:200px;float:left;";
var regex = /(?:height|width):[^;]*;/gi;
console.log(str.replace(regex,""));

answered Jan 14 '19 at 17:26

Wiktor Stribiżew

607,720
39
448
563

What would the regex be for an old fashioned `height="100" width="200"`? – Dan Oct 11 '22 at 20:05
1

@Dan See [this demo](https://regex101.com/r/0Kox5j/4), `(height|width)="([^"]*)"` – Wiktor Stribiżew Oct 11 '22 at 20:11

score 1 · Answer 2 · answered Jan 14 '19 at 17:28

A non-regex solution with javascript built-ins methods to remove the height/width from the STYLE of plain text.

function isNotWidthHeight(style) {
  return style.toLowerCase().indexOf("width") === -1 && style.toLowerCase().indexOf("height") === -1 && style;
}

var str = "margin:0 auto;width:100px;height:200px;float:left;";
var array = str.split(';').filter(isNotWidthHeight);
console.log(array.join(';'));

score 0 · Answer 3 · answered Jan 14 '19 at 17:23

0

You need to capture the values too. .*? instead of (?=(.*?);) will be enough.

var str = "width:100px;height:200px;float:left;";
var regex = /(height|width):.*?;/gi;
console.log(str.replace(regex,""));

answered Jan 14 '19 at 17:23

Code Maniac

37,143
5
39
60

1

You might want to avoid the "." operator unless absolutely necessary. It's commonly associated with performance issues. It might be alright in limited uses but there are usually workarounds to be more explicit. https://blog.mariusschulz.com/2014/06/03/why-using-in-regular-expressions-is-almost-never-what-you-actually-want – GenericUser Jan 14 '19 at 17:32
@GenericUser `.*?` (lazy mode) i don't see any problem here. if even if you do `[\s\S]+?` it's still the same. – Code Maniac Jan 14 '19 at 17:56
They're similar but the dot operator skips over `\n`, so it's incomplete. That's more an aside since that fact has no issue on the question of this thread. My comment was more on general practice to avoid the dot operator. I've had to write some very regex heavy applications and patterns with dot operators are often more performant when rewritten without those operators present - lazy or not. – GenericUser Jan 14 '19 at 18:14

score 0 · Answer 4 · answered Jan 14 '19 at 17:24

Pretty close, you just need an extra group and something to wait until either ; or word boundary, \b. This will grab any setting including calc or whatever settings can follow until the ; or end of inline style.

var str = "width:100px;height:200px;float:left;";
var str2 = "width:calc(100vh - 20px);height:100%;float:left;";

var regex = /((width|height):[\s\S]+?;|\b)/gi;
console.log(str.replace(regex,""));
console.log(str2.replace(regex,""));

Javascript regex For Removing height/width from style

4 Answers4