將電話號碼包裹在段落內的錨標記中

Question

我想包裝一個長段落內的電話號碼，其中的小段落由<br>分隔。 這段代碼我已經正確地包裝了電話號碼，但是由於標記是一個大段落，當它找到帶有電話號碼的文本塊並將該號碼包裝在錨中時，它由<br>分隔，然后它替換了父<p>表示所有其他由<br>分隔的沒有任何電話號碼的段落，不再出現。

在不更改 HTML 標記的情況下，如何更新這個普通的 javascript 代碼以正確包裝電話號碼，同時也呈現<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

我把它縮短了一點，但我希望它可以幫助你。

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