Javascript replace same items with different string by position

Question

I have some problem need to be replaced.

There is the paragraph like:

(*#*) <p>The video was posted on Facebook and shows a shirtless man repeatedly throwing rocks at a wombat as it tries to (*#*) run away.</p>

The symbol (*#*) is a position which need to be replace new string.

But the replacements are different, there will be the image, link and so on...

let photo = '<div class="photo"><img src="'+media+'"></div>'
let link = '<a class="relatednews" href="'+linkStr+'">'linkName'</a>'

The replacements are in order store by json, and I need to use them to replace the paragraph like:

<div class="photo"><img src="'+media+'"></div>
<p>The video was posted on Facebook and shows a shirtless man repeatedly throwing rocks at a wombat as it tries to <a class="relatednews" href="'+linkStr+'">'linkName'</a>' run away.</p>

I use the for and replaceAt could not handle this.

replaceIndexAry is store the position of (*#*) .

console.log(replaceIndexAry)
//[ 0 , 118 ] it's store the every (*#*) index in the paragraph;

for(var j=0;j<data.length;j++){
      if(itype === 'photo'){
         mediaStr = self.replaceAt(paragraph,replaceIndexAry[j],photo)
      }else if(itype === 'link'){
         mediaStr = self.replaceAt(paragraph,replaceIndexAry[j],link)
      }
}

function replaceAt( origin, index, replacement){
    return origin.substr(0, index) + replacement+ origin.substr(index + replacement.length);
}

The result would be:

(*#*) <p>The video was posted on Facebook and shows a shirtless man repeatedly throwing rocks at a wombat as it tries to <a class="relatednews" href="'+linkStr+'">'linkName'</a>' run away.</p>

I could not replace all items successfully, how could I do to replace all (*#*) in paragraph with in order replacement data?

ps The all data( include paragraph and replacement) are given by Back-end, the API could not be changed, and the Back-end asked me follow this logic.

Answer 1

let data='(*#*) <p>The video was posted on Facebook and shows a shirtless man repeatedly throwing rocks at a wombat as it tries to (*#*) run away.</p>';

let photo = '<div class="photo"><img src="media"></div>';
let link = '<a class="relatednews" href="linkStr">linkName</a>';

data = data.replace('(*#*)', photo);
data = data.replace('(*#*)', link);

It will give you:

"<div class=\"photo\"><img src=\"media\"></div> <p>The video was posted on Facebook and shows a shirtless man repeatedly throwing rocks at a wombat as it tries to <a class=\"relatednews\" href=\"linkStr\">linkName</a> run away.</p>"

in data variable if I correctly understand your problem.

Answer 2

If I am understanding your question correctly, you can do like this:

const str = "(*#*) <p>The video was posted on Facebook and shows a shirtless man repeatedly throwing rocks at a wombat as it tries to (*#*) run away.</p>";

const first_str = `<div class="photo"><img src="'+media+'"></div>`;
const second_str = `<a class="relatednews" href="'+linkStr+'">'linkName'</a>`;

const regex = /(\(\*\#\*\))(.*?)(\(\*\#\*\))(.*)/;
const replacement = `${first_str}$2${second_str}$4`;

const result = str.replace(regex, replacement);

// <div class="photo"><img src="'+media+'"></div> <p>The video was posted on Facebook and shows a shirtless man repeatedly throwing rocks at a wombat as it tries to <a class="relatednews" href="'+linkStr+'">'linkName'</a> run away.</p>