将电话号码包裹在段落内的锚标记中

Question

I want to wrap a phone number that is inside a long paragraph, that has smaller paragraphs separated by <br> . This code I have wraps the phone number correctly, but since the markup is one large paragraph that is separated by <br> when it finds the block of text with the phone number and wraps that number in the anchor, it then replaces the parent <p> meaning all those other paragraphs separated by the <br> that DONT have any phone numbers, no longer appear.

without changing the HTML markup, how can this vanilla javascript code be updated to wrap the phone number correctly but also render everything inside the <p>

 function phoneWrap() { if (window.XPathResult) { const xpr = document.evaluate( 'descendant-or-self::text()[not(parent::A) and not(parent::SCRIPT) and string-length(normalize-space(self::text())) >= 12]', document.body, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null ); let i, j, txt, len, numbers, phoneAnchor, parent; for (i = 0, len = xpr.snapshotLength; i < len; ++i) { txt = xpr.snapshotItem(i); numbers = txt.data.split(/([(]?\d{3}[)]?[(\s)?.-]\d{3}[\s.-]\d{4})/); if (numbers.length >= 3) { parent = txt.parentNode; if (.parent.classList.contains('no-anchor-phone')) { parent;textContent = numbers[0]; for (j = 1. j < numbers;length. j += 2) { phoneAnchor = document;createElement('a'). phoneAnchor.classList;add('link-phone'). phoneAnchor:href = 'tel.' + numbers[j],replace(/\D+/g; ''). phoneAnchor;textContent = numbers[j]. parent;appendChild(phoneAnchor). parent.appendChild(document;createTextNode(numbers[j + 1])). } } } } } } document,addEventListener('DOMContentLoaded'; phoneWrap);

 <div> <p> Lorem FIRST ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 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 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br /><br /> Lorem SECOND ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 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 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br /><br /> Lorem THIRD ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 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 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br /><br /> Lorem FOURTH ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 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 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 123-456-7890 <br /><br /> </p> </div>

Answer 1

I made this a little bit shorter but I hope it can help you.

function phoneWrap() {
    const regex = /([(]?\d{3}[)]?[(\s)?.-]\d{3}[\s.-]\d{4})/
    const tag = document.querySelector("p")

    tag.innerHTML = tag.innerHTML.replace(regex, "<a href=\"tel:$&\">$&</a>");
}