0

I have a string

string = "width: 10px; height: 20px; whatever: 0px;";

I wish to change the height part to 50px and leave the rest in tact so that the end result looks like

string = "width: 10px; height: 50px; whatever: 0px;";

I have tried string.replace("height: .*px;", "height: 50px;"); however this doesn't appear to work.

Can someone help me please

5
  • 3
    I would think if you include more context there might be a better solution than this. Where is this string coming from and how is it being used? Commented Oct 29, 2013 at 16:43
  • Any info on the language you're using? Commented Oct 29, 2013 at 16:44
  • Where is the string information coming from? Commented Oct 29, 2013 at 16:46
  • @James The string is part of a HTML element style.cssText. Changing the height directly doesn't appear to have any affect to I am trying a different method. Tbh I am more interested in this as a learning exercise. Commented Oct 29, 2013 at 16:46
  • Why not adding a new rule in a later loaded css, with the same selector containing only the changed height attribute? Commented Oct 29, 2013 at 16:50

3 Answers 3

2

Guilherme's answer is partially correct: you do need to pass in a regular expression. There's another problem with your regex, though: your repetition (.* right before px) is greedy: it will match everything it can. So if you have height: 20px; whatever: 0px, it will greedily match 20px; whatever: 0px (see how it consumed everything up to the last px?). You will have to change it to a lazy match by appending the repetition with a ?:

string.replace( /height: .*?px;/, "height: 50px;" ); 

To make it more robust still, you might want to account for a variable amount of whitespace, or if the height occurs at the end of the string (which I use a lookahead for):

string.replace( /height:\s*\d+px(?=;|$)/, 'height: 50px' );

Note I also used a digit specifier (\d) instead of the wildcard metacharacter (.). Obviously this will only work if height will always be specified in integer units.

Sign up to request clarification or add additional context in comments.

Comments

2

You need to change the regexp to make it non-greedy

"width: 10px; height: 20px; whatever: 0px;".replace(/height: .*?px;/, "height: 50px;")

Note the question mark after star - that tells the regexp engine to find the shortest possible match, i.e. height: 20px; instead of the longest, height: 20px; whatever: 0px;

1 Comment

I didn't realize you could call a method on a string literal like that!
0

If you pass a string as the first argument of your replace method, it will try to replace your string literally. To use regular expressions, you must wrap it with the / character:

yourString = yourString.replace(/height: .*?px;/, "height: 50px;");

I agree with @JamesMontagne that maybe there is a better solution for what you are trying to do. It seems a bit hacky.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.