字符串生成随机颜色值,随机串,URL检测,浏览器判断~~

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

目录

1. 生成随机颜色值 Math.random toString(16)
2. 生成随机颜色值1 Math.random << 或 <<<
3. 生成随机字符串(可指定长度)
4. URL有效性校验
5. 浏览器判断
6. 字符串替换

一 生成随机颜色值 Math.random toString(16)

function getRandomColor() {
  const rgb = []
  for (let i = 0 ; i < 3; ++i){
    let color = Math.floor(Math.random() * 256).toString(16);
    color = color.length == 1 ? '0' + color : color;
    rgb.push(color);
  }
  return '#' + rgb.join('');
}
getRandomColor();
// '#fcf9f0'
复制代码

二 生成随机颜色值1 Math.random << 或 <<<

已自测,暂时没发现问题

function getRandomColor1(){
    var str;
    var str5Or6 = (Math.random()*(1<<30)).toString(16).split('.')[1];
    str5Or6.length === 5 ? str = '0'+str5Or6 : 
    str5Or6.length === 4 ? str = '00'+str5Or6 : str = str5Or6
    return '#' + str;
}
getRandomColor1()
// '#0096af' ...
复制代码

三 生成随机字符串(可指定长度)

/**
 * 生成随机字符串(可指定长度)
 * @param len
 * @returns {string}
 */
randomString = function(len) {
    len = len || 8;
    var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
    var maxPos = $chars.length;
    var pwd = '';
    for (var i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
}
randomString(6)
// 'Ye8wxm'
复制代码

四 URL有效性校验

/**
 * URL有效性校验
 * @param str_url
 * @returns {boolean}
 */
function isURL(str_url) {
    var strRegex = "^((https|http|ftp|rtsp|mms)?://)"
        + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?"
          + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
            + "|" // 允许IP和DOMAIN（域名）
            + "([0-9a-z_!~*'()-]+\.)*" // 域名- www.
            + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名
            + "[a-z]{2,6})" // first level domain- .com or .museum
            + "(:[0-9]{1,4})?" // 端口- :80
            + "((/?)|" // a slash isn't required if there is no file name
            + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
    var re = new RegExp(strRegex);
    return re.test(str_url);
};
var str1 = 'https://juejin.cn/post/1111?a=1';
var str2 = 'http://juejin.cn/post/1111?a=1';
var str3 = 'http://192.168.1.1:8090/post/1111?a=1#aaa';
var str4 = 'http://192.168.1.1/post/1111?a=1#aaa';
var str5 = 'htt://192.168.1.1/post/1111?a=1#aaa';
isURL(str1); // true
isURL(str2); // true
isURL(str3); // true
isURL(str4); // true
isURL(str5); // false

复制代码

正则 有点问题

function isURL1(str){
      return !!str.match(/(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g);
  }

var str2 = 'http://juejin.cn/post/1111?a=1';
var str3 = 'http://192.168.1.1:8090/post/1111?a=1#aaa';
isURL1(str2); // true
isURL1(str3); // false
复制代码

五 浏览器判断

function parseUA() {
    var u = navigator.userAgent;
    var u2 = navigator.userAgent.toLowerCase();
    return {
        trident: u.indexOf('Trident') > -1, //IE内核
        presto: u.indexOf('Presto') > -1, //opera内核
        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
        iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
        iPad: u.indexOf('iPad') > -1, //是否iPad
        webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
        iosv: u.substr(u.indexOf('iPhone OS') + 9, 3),
        weixin: u2.match(/MicroMessenger/i) == "micromessenger",
        ali: u.indexOf('AliApp') > -1,
    };
}
var ua = parseUA();

console.log(ua);
// {trident: false, presto: false, webKit: true, gecko: false, mobile: false, …}
复制代码

六 字符串替换

20% 是url中的空字符, &nbsp 是 HTML 中的空字符

替换字符串中的空格为 20%

function replaceSpace(str){
    if(typeof str !== 'string') return false
    let res = '';
    for(let i=0; i< str.length; i++){
        let item = str[i];
        if(item === ' '){
            res += '%20'
        }else{
            res += item;
        }  
    }
    return res;
};
var str = " a b c ";
replaceSpace(str)
// '%20a%20b%20c%20'

复制代码

参考

• 常用JS方法整理

总结

• 字符串生成随机颜色值, 随机串, URL检测, 浏览器判断~~