How to replace part of a text using regular expression in JavaScript?

Question

I am fetching HTML content from database and displaying in UI. If the displayed content contains images having width and height specified then I need to replace the image width and height to some fixed value while displaying in UI.

One sample content is like:

<p>
   Sample paragraph text. 
   <br />
   <img src="http://www.example.com/myimage.jpg?width=500&height=500" 
    title="Test Image" />
   Sample text.
   <br />
</p>

Here, I want to set the image width=300 and remove the height dynamically for different images.

I have tried to replace the text using regular expression as follows:

.replace(new RegExp("width=([^&]{0,})", 'gi'), 'width=300') 
.replace(new RegExp("[?&]height=([^&]{0,})", 'gi'), '')

But it gives result as follows:

<p>Sample paragraph text. <br /> <img src="http://www.example.com/myimage.jpg?width=300

It replaces all the text after ?width=300.

I want the result like: <p>Sample paragraph text. <br /> <img src="http://www.example.com/myimage.jpg?width=300" title="Test Image" /> Sample text.<br /></p>

So, I guess, the problem is in the regular expression. Please help me to correct this.

Many many thanks in advance!

Parse the HTML first and only apply the string substitution on the attribute value you want to change (I assume you know how to traverse the DOM). — Felix Kling
– Felix Kling, Commented Sep 4, 2013 at 7:04
The browser parses the HTML, why not set innerHTML and then change the image dimensions ? — Denys Séguret
– Denys Séguret, Commented Sep 4, 2013 at 7:04
@Dystroy: I am using ImageResizer to set the image width and height. ImageResizer handles the width and height if it is specified in image "src" attribute. imageresizing.net/docs/basics — user2338652
– user2338652, Commented Sep 4, 2013 at 7:16

Matt · Accepted Answer · 2013-09-04 07:33:21Z

1

This pattern: /[^&]{0,}/ is gobbling up everything that is not a & character, which is why it extends beyond the URL itself. Instead, since you know that the width and height are numbers, you can just match on digits:

.replace(/\bwidth=\d*/gi,'width=300')
.replace(/&height=\d*|\bheight=\d*&?/gi,'');

The \b is a zero-width match to a word boundary, so that if you have framewidth=500 for example it won't be affected. The 2 matches to height are so that it won't replace both &'s if they are on each side. E.g. you don't want '?width=500&height=500&cache=123' to turn into '?width=300cache=123' for instance.

answered Sep 4, 2013 at 7:33

Matt

20.8k1 gold badge61 silver badges76 bronze badges

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

Comments

David Hellsing · Accepted Answer · 2013-09-04 07:46:33Z

0

Unless you have more parameters in the query, this should do it:

.replace(/(\?width=)[^"]+/i, '$1300');

Put this in a console to test it:

"http://www.example.com/myimage.jpg?width=500&height=500".replace(/(\?width=)[^"]+/i, '$1300');

edited Sep 4, 2013 at 7:46

answered Sep 4, 2013 at 7:41

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Collectives™ on Stack Overflow

How to replace part of a text using regular expression in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related