Javascript заменяет одни и те же элементы на разные строки по позиции

Question

У меня возникла проблема, требующая замены.

Имеется абзац , например:

(*#*) <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>'

Запасы хранятся в порядке, сохраняемом json, и янеобходимо использовать их для замены абзаца , например:

<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>

Я использую для , а replaceAt не может справиться с этим.

replaceIndexAry - это позиция (*#*).

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);
}

Результат будет:

(*#*) <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>

Я не смог заменить все элементы успешно, как я могсделать, чтобы заменить все (*#*) в абзаце на данные для замены заказа?

ps. Все данные (включая абзац и замену) предоставляются Back-end, API можетне будет изменено, и Back-end попросил меня следовать этой логике.

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);

Это даст вам:

"<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>"

в data переменную, если я правильно понимаю вашу проблему.

Answer 2

Если я правильно понимаю ваш вопрос, вы можете сделать так:

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>