jQuery / JavaScript查找并替换为RegEx

debugcn 发表于 Dev

斯卡比乔

我有许多页面包含此电话号码，格式为xxx-xxx-xxxx。这些电话号码不是链接，我需要做的是编写一些脚本来首先找到这些电话号码。这就是我为此得到的：

$(document).ready(function(){

var content = $(".main").text();
var phoneNumber = content.match(/\d{3}-\d{3}-\d{4}/)

alert(phoneNumber);
});

这在捕获号码的过程中起很大作用，我现在要做的是将页面上的电话号码替换为

'<a href=" onclick=" ... "' + 'tel:' + phoneNumber + '">' + 'originalPhoneNumber' + '</a>'

但是，我现在完全迷失了。我可以.replaceWith()在jQuery中使用吗？

编辑：

好的，我尝试修改代码以包含我想要的第二个属性：

$(document).ready(function () {
    var content = $(".main").html();
    content = content.replace(/\d{3}-\d{3}-\d{4}/g, function(v){
        return $('<a>').attr({
            href: "tel:"+v,
            onclick: "ga('send', 'event', 'lead', 'phone call', 'call');"
        }).html(v)[0].outerHTML;
    });

    $('.main').html(content);
});

它仍在添加href，但忽略了onclick。

TheStatehz

这将用tel：链接替换元素中所有匹配的字符串

<div class = "main">333-333-3333 444-444-4444</div>

<script type="text/javascript">

    var content = $(".main").text();

    content = content.replace(/\d{3}-\d{3}-\d{4}/g, function(v){
        return $('<a>').attr('class', set.classname).attr('href', 'tel:'+v).html(v).wrap('<a>').parent().html();
    });

    $('.main').html(content);

</script>

或更整洁地实现为：

    $.fn.extend({
        tel : function(def) {

            var set = {
                regex : /\d{3}-\d{3}-\d{4}/g,
                classname : ""
            }

            $.extend(true, set, def);

            var c = $(this).html();

            c = c.replace(set.regex, function(v){
                return $('<a>').attr('class', set.classname).attr('href', 'tel:'+v).html(v).wrap('<a>').parent().html();
            });

            $(this).html(c);
            return this;
        }
    });

    // default regex: 000-000-0000
    $('.main').tel();       

    // default regex: 000-000-0000 <a> class of tel-link applied
    $('.main').tel({ classname : "tel-link" });             

    // override regex: 0000-0000-000    
    $('.main').tel({ regex: /\d{4}-\d{4}-\d{3}/g });