Заменить все совпадения в строке и вернуть обновленную строку

Question

У меня есть строка на сервере (без анализа DOM), где мне нужно заменить все совпадения и вернуть обновленную строку. Проблема в том, что совпадение содержит часть, которую мне нужно сохранить.

const data =
  '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a data-type=\"embed\" href="http://google.com">Link</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a data-type=\"embed\" href="http://wired.com">Link</a> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur <a data-type=\"embed\" href="http://tested.com">Link</a> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
const regex = /<a data-type=\"embed\" href=\"http:\/\/.*?\">Link<\/a>/g;
const newData = [...data.matchAll(regex)].map((match) => {
  const [string] = match;
  const [end] = string
    .split(/<a data-type=\"embed\" href=\"/g)
    .filter((val) => val);
  const [href] = end.split(/\">/g);
  const newString = `<div data-href="${href}"></div>`;
  return newString;
});
console.log(newData);

Итак, в data есть три совпадения, например. <a href="http://google.com">Link</a>, где мне нужно извлечь http://google.com et c. from и «вставить» его в обновленную строку. Мне это удалось, но вопрос в том, как заменить совпадения.

На самом деле у меня есть рабочее решение с split/join:

const data =
  '<p>Lorem ipsum dolor sit amet, <a data-type=\"embed\" href="http://google.com">Another link</a> consectetur adipiscing elit, sed do eiusmod <a data-type=\"embed\" href="http://google.com">Link</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a data-type=\"embed\" href="http://wired.com">Link</a> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur <a data-type=\"embed\" href="http://tested.com">Link</a> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
const newData = data
  .split('<a data-type=\"embed\" href="')
  .join('<div data-href="')
  .split('">Link</a>')
  .join('"></div>');
console.log(newData);

Однако это решение приведет к нежелательным результатам, если нет совпадения во втором split/join, или оно может также изменять ссылки, которые не должны быть изменены.

Итак, моя цель - получить результат, как во втором случае, но с правильными заменами, как в первом.

Answer 1

Отвечая на вопрос до того, как мне сказали, что это строка на сервере

Не используйте регулярное выражение для синтаксического анализа HTML

const data = '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a data-type=\"embed\" href="http://google.com">Link</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a data-type=\"embed\" href="http://wired.com">Link</a> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur <a data-type=\"embed\" href="http://tested.com">Link</a> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';

const container = document.createElement("div");
container.innerHTML = data;
[...container.querySelectorAll("[data-type=embed]")].forEach(link => {
  console.log(link)
  const div = document.createElement("div");
  div.dataset.href = link.href;
  link.parentNode.replaceChild(div, link);
})
console.log(container.innerHTML)

Answer 2

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

const data =
  '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a data-type=\"embed\" href="http://google.com">Link</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a data-type=\"embed\" href="http://wired.com">Link</a> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur <a data-type=\"embed\" href="http://tested.com">Link</a> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
const regex = /<a data-type="embed" href="(http:\/\/[^"]+)">Link<\/a>/g;

var result = data.replace(regex, '<div data-href="$1"></div>')
console.log(result);

Результат:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <div data-href="http://google.com"></div> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <div data-href="http://wired.com"></div> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur <div data-href="http://tested.com"></div> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Старый ответ до уточнения желаемого результата:

Вот рабочее решение:

const data = '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a data-type=\"embed\" href="http://google.com">Link</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a data-type=\"embed\" href="http://wired.com">Link</a> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur <a data-type=\"embed\" href="http://tested.com">Link</a> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

const regex = /<a data-type="embed" href="(http:\/\/[^"]+)">Link<\/a>/g;

function extractLinks(data) {
    var links = [];
    data.replace(regex, (m, p1) => {
        links.push(p1);
    });
    return links.map((link) => {
        return '<div data-href="' + link + '"></div>';
    });
}

console.log(extractLinks(data));