时间戳

首页 > 解决方案 > 将电话号码包裹在段落内的锚标记中

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

问题描述

我想包装一个长段落内的电话号码，其中较小的段落由<br>. 这段代码我已经正确地包装了电话号码，但是由于标记是一个大段落，<br>当它找到带有电话号码的文本块并将该号码包装在锚点中时，它会被分隔开，然后它会替换父级，<p>意思是所有其他由 DONT 分隔的段落<br>没有任何电话号码，不再出现。

在不更改 HTML 标记的情况下，如何更新这个 vanilla 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>

标签： javascript

解决方案

我把它缩短了一点，但我希望它可以帮助你。

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

推荐阅读