Javascript 正则表达式 - 仅将一个字符添加到匹配的字符串

Question

I am trying to create a JS regex that matches aa 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

Answer 1

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"> </div>` console.log('Before: ' + s); console.log('After: ' + s.replace(/(<img[^>]*)>/g,'$1 />'));

Answer 2

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)