客服系统前端开发：JavaScript获取URL中的协议部分和域名部分【唯一客服】网页在线客服系统

再客服系统中如果想要链接websocket需要确定是ws://  还是wss:// 所以，我封装了两个函数，用于获取URL中的协议是HTTP 还是HTTPS ，以及获取到域名部分

可以使用 JavaScript 中的 String.prototype.match() 方法来执行匹配操作，并使用第一个捕获组来获取匹配的域名部分。

//获取协议部分
function getProtocolFromUrl(url) {
    if(url==""){
        url=window.location.href;
    }
    const regex = /^(https?)/i;
    const match = url.match(regex);
    return match[1];
}
console.log(getProtocolFromUrl("https://gofly.v1kf.com")); // "https"
console.log(getProtocolFromUrl("http://gofly.v1kf.com/")); // "http"
console.log(getProtocolFromUrl("http://gofly.v1kf.com")); // "http"
console.log(getProtocolFromUrl("http://www.baidu.com/sdsdsds")); // "http"

这样就能判断是使用ws还是wss去链接websocket

还要获取域名部分

//获取域名部分
function getDomainFromUrl(url) {
    if(url==""){
        url=window.location.href;
    }
    const regex = /^https?:\/\/([^\/]+)/i;
    const match = url.match(regex);
    return match[1];
}
console.log(getDomainFromUrl("")); // 当前页面的域名
console.log(getDomainFromUrl("https://gofly.v1kf.com")); // "gofly.v1kf.com"
console.log(getDomainFromUrl("http://gofly.v1kf.com/")); // "gofly.v1kf.com"
console.log(getDomainFromUrl("http://gofly.v1kf.com")); // "gofly.v1kf.com"
console.log(getDomainFromUrl("http://www.baidu.com/sdsdsds")); // "www.baidu.com"

实际项目中的使用

唯一在线客服系统

https://gofly.v1kf.com