Javascript/JQuery 正则表达式仅删除链接中的空格、括号、句点、减号

Question

由于大量的搜索，我已经走到了这一步，但我坚持只格式化链接而不格式化文本的方法。我希望链接在文本中包含数字，但没有空格、括号、句号或减号，并保留文本不变。该链接应以 <a href="tel:+15551231234">555 123-1234</a> 为例。

<div id="phonedirectory">
    <ul>
        <li>Phone 1 - 555 123-1234</li>
        <li>Phone 2 - 555.123.4321</li>
        <li>Phone 3 - (555) 123-6789</li>
    </ul>
</div>

<script type="text/javascript">
//<![CDATA[ 
$(window).load(function(){
    var regex = /\(?\d{3}\)?[-.\s]\d{3}[-.\s]\d{4}/g;
    var text = $("body:first").html();
    text = text.replace(regex, "<a href=\"tel:+1$&\">$&</a>");
    $("body:first").html(text);
});
//]]>
</script>

大家有什么想法吗？

Answer 1

无论您做什么，都不要(!)用正则表达式替换页面的整个 HTML。曾经。这是自找麻烦。

正确的方法比较复杂。但作为返回，它......嗯......正确。

var phonePattern = /\(?\d{3}\)?[-.\s]\d{3}[-.\s]\d{4}/g,
    phoneReplacement = '<a href="tel:+1$&">$&</a>';

function replacePhoneNumbers(container) {
    $(container).contents(":not(a)").each(function () {
        var $this = $(this);
        if (this.nodeType === 3) {
            $(this).replaceWith( $this.text().replace(phonePattern, phoneReplacement) );
        } else {
            return replacePhoneNumbers(this);
        }
    });
}

$(function () {
    replacePhoneNumbers(document.body);
});

该函数是递归的。它会检查您提供给它的整个容器(在本例中为 document.body)并专门替换文本节点 (nodeType === 3)但前提是 它们还不是链接的一部分。

这样，仅处理文档中真正需要处理的部分。文档的其余部分保持不变。不会发生重新渲染，不会发生布局更改，如果弄乱正则表达式，也没有破坏文档树的风险。

<小时/>

如果需要，您甚至可以将其整合到 jQuery 插件中。

$.fn.extend({
    phonelinkify: function (pattern, replacement) {
        return this.contents().each(function () {
            var $this = $(this);
            if (this.nodeType === 3 && $this.parents("a").length === 0) {
                $(this).replaceWith( $this.text().replace(pattern, replacement) );
            } else {
                return $(this).phonelinkify(pattern, replacement);
            }
        });
    }
});

和

$(function () {
    $("#phonedirectory").phonelinkify(/\(?\d{3}\)?[-.\s]\d{3}[-.\s]\d{4}/g, '<a href="tel:+1$&">$&</a>');
});

<小时/>

要进行更自定义的替换，请将 phoneReplacement 变量更改为函数。

phoneReplacement = function (num) {
    return '<a href="tel:' + num.replace(/\D/g, "") + '">' + num + '</a>';
};

这会将电话 3 - (555) 123-6789 变为

Phone 3 - <a href="tel:5551236789">(555) 123-6789</a>

这适用于该答案的原始版本和插件版本。 Read up on .replace()了解传递函数作为替换的工作原理。

<小时/>

免责声明:这里使用的正则表达式是否完全适合电话号码匹配(我非常怀疑它们)超出了本答案的范围。