Как передать в дата-атрибут ту часть строки, которая была заменена при помощи регулярного выражения?

Question

[Qurel]

Есть строка, в ней необходимо найти телефоны, обернуть каждый в span и заменить на "показать телефон". При клике на span показывать телефон. Как передать в дата-атрибут ту часть строки, которая была заменена при помощи регулярного выражения? У меня пока получается передать первый телефон.

<p class="js-phone-replace">Lorem ipsum 000-00-00 dolor sit amet consectetur 050-555-55-55.</p>

.link__span {
   cursor: pointer;
   font-weight: 700;
   color: #4285f4;
}

$('.js-phone-replace').each(function(){
	 $(this).html($(this).text().replace(/(?<!\w)(?:(?:(?:(?:\+?3)?8\W{0,5})?0\W{0,5})?[34569]\s?\d[^\w,;(\+]{0,5})?\d\W{0,5}\d\W{0,5}\d\W{0,5}\d\W{0,5}\d\W{0,5}\d\W{0,5}\d(?!(\W?\d))/g, '<span class="link__span js-phone-show" data-phone="'+$(this).text().match(/(?<!\w)(?:(?:(?:(?:\+?3)?8\W{0,5})?0\W{0,5})?[34569]\s?\d[^\w,;(\+]{0,5})?\d\W{0,5}\d\W{0,5}\d\W{0,5}\d\W{0,5}\d\W{0,5}\d\W{0,5}\d(?!(\W?\d))/)+'">показать телефон</span>'));
});

Answer 1

[0xD34F]

const phoneRegExp = здесь ваше регулярное выражение;
const phoneButtonTemplate = '<span data-phone="$&">показать телефон</span>';

document.querySelectorAll('.js-phone-replace').forEach(n => {
  n.innerHTML = n.textContent.replace(phoneRegExp, phoneButtonTemplate);
});