Question

我有许多页面包含此格式为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>'

但是我在这一点上完全迷失了。我可以在jQuery中使用.replaceWith()吗？

修改：

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

$(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。

Answer 1

这将使用tel：link

替换元素中的所有匹配字符串

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

jQuery / JavaScript查找并替换为RegEx

1 个答案: