Change image source attribute in string HTML and return string HTML again

Question

I have html web page and i want to download this web page as pdf. So that i convert this web page to string, and i must sent to the service. Namely i have unchanging string html. I can't add indicator for split string html. When the html web page too large with base 64 string images, i must change this base 64 string with avatar image url (Because it is too large to send data with json). i have short html string with changing base 64 string and then i can send to the service side to download pdf. I have an HTML string (it looks like my real html string) see below:

var stringHTML = 
"
<div id="myDiv">
   <img src="abc" /></div>
   <img src="abc" /></div>
   <img src="abc" /></div>
   <img src="abc" /></div>
</div>
";

I want to change image src attribute value to xyz. Namely I want to convert the HTML string to:

stringHTML = 
"
<div id="myDiv">
   <img src="xyz" /></div>
   <img src="xyz" /></div>
   <img src="xyz" /></div>
   <img src="xyz" /></div>
</div>
";

How can change this source attribute values with return again string value ? Namely i must have string html after change operation..

Possible duplicate of [Find and replace all matching strings within textarea](https://stackoverflow.com/questions/8809172/find-and-replace-all-matching-strings-within-textarea) — , Aug 28 '17 at 15:12
And just so you know both of your snippets are not valid JS code. You can't jump lines and indent the string like that. — Ivan, Aug 28 '17 at 15:19

score 0 · Answer 1 · edited Aug 28 '17 at 15:26

Based off of the linked possible duplicate question, you would do something like this:

stringHTML = stringHTML.replace(/abc/g,"xyz");

or

stringHTML = stringHTML.replace(new RegExp("abc","g"),"xyz");

It's also worth noting that your current string is not valid. You'll either need to replace the opening and closing double-quotes (") with single-quotes (') or escape the double-quotes used inside the string. And, as Ivan mentioned in the comments, javascript cannot span lines without special allowances (escaping the newline, etc). You could define it like this, I think:

let stringHTML = ' +
    <div id="myDiv"> +
      <img src="abc" /></div> +
      <img src="abc" /></div> +
      <img src="abc" /></div> +
      <img src="abc" /></div> +
    </div>';

You could also create an array and join it immediately:

let stringHTML = [
    '<div id="myDiv">',
        '<img src="abc" /></div>',
        '<img src="abc" /></div>',
        '<img src="abc" /></div>',
        '<img src="abc" /></div>',
    '</div>'
].join('');

See this question for more on multiline string definition.

Change image source attribute in string HTML and return string HTML again

1 Answers1