Javascript: Replace image name with regex in html string

Question

I am trying to replace an image name (product-1-placeholder-href.png) from an HTML string. I tried to use all the regex rules correctly. However, it still does not match and replace the string and I really don't know why.

So this is my regex:

var myStr = htmlContent;
var newStr = myStr.replace(/'product-1-placeholder-href\.png'/g, 'SOMETHINGIMPORTANT');
console.log(newStr.indexOf('product-1-placeholder-href.png'));
console.log(newStr.indexOf('SOMETHINGIMPORTANT'));

The first console.log still gives me an index, the second one is "-1" so no match.

This is the part of the HTML which I want to replace:

<div id="Group_9">
    <svg class="Rectangle">
        <rect id="Rectangle" rx="0" ry="0" x="0" y="0" width="44" height="44">
        </rect>
    </svg>
    <svg class="ID43059702_02_B">
        <pattern elementId="ID43059702_02_B_A2_Rectangle_31" id="product-1-placeholder" x="0" y="0" width="100%" height="100%">
           <image id="product-image-1" x="0" y="0" width="100%" height="100%"
                            href="product-1-placeholder-href.png"
                            xlink:href="product-1-placeholder-href.png" alt="No image found">
            </image>
        </pattern>
    </svg>
</div>

Is my regex wrong or is it just not possible to replace inside this HTML string?

Your code is going to create a string variable of the HTML string and then replace the text of that new variable, not the HTML itself. Is this the goal or are you trying to alter the HTML code using regex? — dvo
– dvo, Commented May 16, 2019 at 12:37
You are trying to replace a string surrounded by single quotes, the actual string has that surrounded by double quotes — VLAZ
– VLAZ, Commented May 16, 2019 at 12:38
Any particular reason you aren't using DOM manipulation to set a new value? — CrayonViolent
– CrayonViolent, Commented May 16, 2019 at 12:41

hashed_name · Accepted Answer · 2019-05-23 05:54:53Z

1

You can not use quotes in regex for specifying string value. Try the following way, by removing quotes.

var myStr = "<html><body>product-1-placeholder-href\.png</body></html>";
var newStr = myStr.replace(/product-1-placeholder-href\.png/g, 'SOMETHINGIMPORTANT');

console.log(newStr);

edited May 23, 2019 at 5:54

answered May 16, 2019 at 12:39

hashed_name

5517 silver badges22 bronze badges

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

2 Comments

threxx Over a year ago

YES! Thank you. I really didn't look at the quotes

VLAZ Over a year ago

You can use quotes in regex and it's nothing to do with specifying string value - OP had a typo, the text is surrounded by double quotes, while the regex used single quotes.

tuanngocptn · Accepted Answer · 2019-05-16 12:43:58Z

1

Why you don't use DOM for this case.

I think it is easy to control and understand

document.getElementById("product-image-1").href="SOMETHINGIMPORTANT"; 
document.getElementById("product-image-1").setAttribute("xlink:href", "SOMETHINGIMPORTANT");

Thanks for reading.

answered May 16, 2019 at 12:43

tuanngocptn

1,48915 silver badges22 bronze badges

1 Comment

threxx Over a year ago

I work with puppeteer, so I don't really have a dom, just the HTML string which is created to a new page and screenshotted. So yes this would work if I have a DOM, but I don't :)

Collectives™ on Stack Overflow

Javascript: Replace image name with regex in html string

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related