Javascript Regex - add only a character to matched string

Question

I am trying to create a JS regex that matches a a string inside a given piece of code by it's beggining and ending and then only adds one character to that matched string.

Please see below what I mean:

Imagine that I supply the following code:

<div>
    <p>This is just some random text</p>
    <a href="https://somerandomsrc.com">
        <img src="https://somerandomsrc.com" alt="random image">
    </a>
    <img src="https://someotherrandomsrc.com" alt="another random image">
</div>

What I need to do is to have the script finding all instances of <img> and add a closing slash to the <img> elements so I would have something like this:

<div>
    <p>This is just some random text</p>
    <a href="https://somerandomsrc.com">
        <img src="https://somerandomsrc.com" alt="random image" />
    </a>
    <img src="https://someotherrandomsrc.com" alt="another random image" />
</div>

Any help will be appreciated.

Regards, T

Why? HTML doesn't require that slash. Are you converting HTML to XML? — Barmar
– Barmar, Commented Aug 25, 2022 at 21:21

Pushpesh Kumar Rajwanshi · Accepted Answer · 2022-08-26 02:39:35Z

2

Usually regex should be avoided for dealing with html/xml, but since your img tag seems broken and img tags are not nested, you can use following regex,

(<img[^>]*)>

and replace it with

$1 />

and fix your broken img tags.

Demo

const s = `<div>
    <p>This is just some random text</p>
    <a href="https://somerandomsrc.com">
        <img src="https://somerandomsrc.com" alt="random image">
    </a>
    <img src="https://someotherrandomsrc.com" alt="another random image">
    <img src="https://someotherrandomsrc.com" alt="another random image" />
</div>`

console.log('Before: ' + s);
console.log('After: ' + s.replace(/(<img[^>]*[^/])>/g,'$1 />'));

Edit1:

Yes just change the regex to (<img[^>]*[^/])> so that it won't match the one which already has a proper closing tag />.

Updated Demo

edited Aug 26, 2022 at 2:39

answered Aug 25, 2022 at 21:15

Pushpesh Kumar Rajwanshi

18.4k2 gold badges22 silver badges39 bronze badges

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

2 Comments

Slaveworx Over a year ago

It works perfectly. Now I have another question. What If the given code has an image where the <img> element already has an ending slash? Using your solution gives me two ending slashes. Is there any way I can go around it so the code puts slashes in tags that don't have them and keeps just one slash where there is already one?

Pushpesh Kumar Rajwanshi Over a year ago

@Slaveworx: Yes we can change the regex slightly so already closed tags won't match giving you two slashes. Updated the answer, please check.

Mina · Accepted Answer · 2022-08-25 21:16:09Z

1

Just select the img and its content in a group (<img\s.*?) except the closing tag and use replace with a global flag to replace after it with / slash.

const string = `<div>
    <p>This is just some random text</p>
    <a href="https://somerandomsrc.com">
        <img src="https://somerandomsrc.com" alt="random image">
    </a>
    <img src="https://someotherrandomsrc.com" alt="another random image">
</div>`

const result = string.replace(/(<img\s.*?)>/g, '$1 />') 

console.log(result)

answered Aug 25, 2022 at 21:16

Mina

17.8k3 gold badges24 silver badges39 bronze badges

Collectives™ on Stack Overflow

Javascript Regex - add only a character to matched string

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related