某客服系统匹配更多的超链接场景修改js实例 正则匹配url网址

某客服系统匹配更多的超链接场景修改js实例 正则匹配url网址

只截取部分代码

分为手机端、电脑端、电脑后台端三个地方的修改

代码变量msg2
1、/public/assets/js/index/inchat.js
2、/public/assets/js/moblie/mochat.js

代码变量msg
3、/public/assets/js/admin/chat.js
4、/public/assets/js/admin/mchat.js

优化前

优化后

//发送消息

var send = function () {
    //获取 游客id

    var msg = $("#text_in").val();
    var reg = new RegExp( '<' , "g" )
    var msg2 =msg.replace(reg,'&lt;');

    var reg2 = new RegExp( '>' , "g" )
    msg2 =msg2.replace(reg2,'&gt;');

    /*
    msg2 =msg2.replace('http://','');
    msg2 =msg2.replace('https://','');

    msg2=msg2.replace(/[a-z]+[.]{1}[a-z\d\-]+[.]{1}[a-z\d]*[\/]*[A-Za-z\d]*[\/]*[A-Za-z\d]*[\/]*[A-Za-z\d]*[\/]*[A-Za-z\d]/g,function (i) {

        return 'http://'+i;
    });

    msg2=msg2.replace(/(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g,function (i) {

        a=i.replace('http://','');
        return '<a href="'+i+'" target="_blank">'+a+'</a>';
    });

    */

    msg2 = msg2.replace(/http:\/\//g, 'http:\/\/');
   msg2 = msg2.replace(/https:\/\//g, 'https:\/\/');
   //20240710
   msg2 = msg2.replace(/[-A-Za-z0-9+&@#/%?=~_|!:,.;]*\.[A-Za-z]{2,}\/?[-A-Za-z0-9+&@#/%=~_|]*/g, function (match) {

       if (match.includes('http://') || match.includes('https://')) {
        return '<a href="' + match + '" target="_blank">' + match + '</a>';
    } else {
        return '<a href="http://' + match + '" target="_blank">' + match + '</a>';
    }

        });

主要起作用的代码：

//20240710修改的，加强了链接识别，加强了后缀识别
   msg = msg.replace(/http:\/\//g, 'http:\/\/');
   msg = msg.replace(/https:\/\//g, 'https:\/\/');
   //20240710
   msg = msg.replace(/[-A-Za-z0-9+&@#/%?=~_|!:,.;]*\.[A-Za-z]{2,}\/?[-A-Za-z0-9+&@#/%=~_|]*/g, function (match) {

       if (match.includes('http://') || match.includes('https://')) {
        return '<a href="' + match + '" target="_blank">' + match + '</a>';
    } else {
        return '<a href="http://' + match + '" target="_blank">' + match + '</a>';
    }

});

20250301增加了动态链接的识别，值得注意的是，前后台的代码不一样需要注意下变量哦

代码变量msg2
1、/public/assets/js/index/inchat.js
2、/public/assets/js/moblie/mochat.js

前台端：

msg2 = msg2.replace(/http:\/\//g, 'http:\/\/');
msg2 = msg2.replace(/https:\/\//g, 'https:\/\/');

// 更新正则表达式以支持 URL 中的查询参数和动态链接
msg2 = msg2.replace(/^(https?:\/\/)?(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d+)?(\/[a-zA-Z0-9-._~:?#%&/=]*)?$/g, function (match) {
    if (match.includes('http://') || match.includes('https://')) {
        return '<a href="' + match + '" target="_blank">' + match + '</a>';
    } else {
        return '<a href="http://' + match + '" target="_blank">' + match + '</a>';
    }
});

代码变量msg
3、/public/assets/js/admin/chat.js
4、/public/assets/js/admin/mchat.js

后台端：

  msg = msg.replace(/http:\/\//g, 'http:\/\/');
  msg = msg.replace(/https:\/\//g, 'https:\/\/');
  //20240710
  msg = msg.replace(/^(https?:\/\/)?(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d+)?(\/[a-zA-Z0-9-._~:?#%&/=]*)?$/g, function (match) {

      if (match.includes('http://') || match.includes('https://')) {
        return '<a href="' + match + '" target="_blank">' + match + '</a>';
    } else {
        return '<a href="http://' + match + '" target="_blank">' + match + '</a>';
    }

  });

2025/03/5改进：这样，正则表达式已经能够匹配带有 IP 地址和端口号的 URL，同时保留了对域名、路径和查询参数的支持。

msg2 = msg2.replace(/http:\/\//g, 'http:\/\/');
  msg2 = msg2.replace(/https:\/\//g, 'https:\/\/');

msg2 = msg2.replace(/(https?:\/\/)?((?:[\w-]+\.)+[\w-]{2,}(?:\.[a-zA-Z]{2,})*|(?:\d{1,3}\.){3}\d{1,3})(:\d+)?(\/[^\s?#]*)?(\?[^\s#]*)?(#[^\s]*)?/gi, function(match, p1, p2, p3, p4, p5, p6) {
    // 协议处理
    const protocol = p1 ? p1 : 'http://';

    // 端口处理
    const port = p3 || '';

    // 构建完整URL
    const fullUrl = protocol + p2 + port + (p4 || '') + (p5 || '') + (p6 || '');

    // 返回超链接格式
    return `<a href="${fullUrl}" target="_blank">${fullUrl}</a>`;
});