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

你想这样做吗？

$('li').html(function (i, html) {
    var text = html.split(' - ').slice(1).join(' - '),
        num = text.match(/\d+/g).join('');
    return '<a href="tel:+1' + num + '">' + text + '</a>';
});

Answer 2

老实说，如果不使用正则表达式，我会这样做。

var numOnly = function (inputString) {
    var validChars = "0123456789";
    var outputString = '';

    var len = inputString.length;
    for (var i = 0; i < len; i++) {
        if (validChars.indexOf(inputString[i]) > -1) {
            outputString += inputString[i];
        }
    }

    return outputString;
}

var phoneNumber = numOnly(phoneNumberString);

Answer 3

无论你做什么，都不要（！）正则表达式 - 替换页面的整个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），但仅当它们不是链接的一部分时。< / p>

这样，只有文档的那些部分才会被处理，需要进行治疗。文件的其余部分保持不变。如果弄乱正则表达式，则不会发生重新渲染，也不会更改布局，也不会有破坏文档树的风险。

如果需要，您甚至可以将其转换为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>';
};

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

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

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

免责声明：此处使用的正则表达式是否完全适合于电话号码匹配（我非常怀疑它们）是否超出了这个答案的范围。

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

3 个答案: