• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

directory

  1. Generate random color valuesMath.random toString(16)
  2. Generates a random color value of 1Math.random << 或 <<<
  3. Generate random strings (length can be specified)
  4. URL validity check
  5. Browser judgment
  6. String substitution

Generate random color valuesMath.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 The '#' + rgb.join(' ');
}
getRandomColor();
// '#fcf9f0'
Copy the code

Generate random color value 1Math.random << 或 <<<

We have tested ourselves and found no problem at present

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 The '#' + str;
}
getRandomColor1()
// '#0096af' ...
Copy the code

Generate random string (length can be specified)

/** * Generates a random string (optionally of length) *@param len
 * @returns {string}* /
randomString = function(len) {
    len = len || 8;
    var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /**** removes confusing characters oOLl,9gq,Vv,Uu,I1****/ by default
    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'
Copy the code

Verify URL validity

/** * VERIFY URL validity *@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
            + "|" // Allow IP and DOMAIN
            + "([0-9a-z_!~*'()-]+\.) *" // Domain name - WWW.
            + "([0-9 a-z] [0-9 a-z -], 21 {0})? [0-9a-z]\." // Secondary domain name
            + "[a-z] {2})" // first level domain- .com or .museum
            + "(: [0-9] {1, 4})?" // Port - :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 = 'HTTP: / / 192.168.1.1 / post / 1111? a=1#aaa';
isURL(str1); // true
isURL(str2); // true
isURL(str3); // true
isURL(str4); // true
isURL(str5); // false

Copy the code

There’s a problem with the regex

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
Copy the code

5 Browser Judgment

function parseUA() {
    var u = navigator.userAgent;
    var u2 = navigator.userAgent.toLowerCase();
    return {
        trident: u.indexOf('Trident') > -1./ / IE kernel
        presto: u.indexOf('Presto') > -1./ / opera kernel
        webKit: u.indexOf('AppleWebKit') > -1.// Apple, Google kernel
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') = = -1.// The Firefox kernel
        mobile:!!!!! u.match(/AppleWebKit.*Mobile.*/), // Whether it is a mobile terminal
        ios:!!!!! u.match(/\(i[^;] +; ( U;) ? CPU.+Mac OS X/), / / ios terminal
        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1.// An Android terminal or uc browser
        iPhone: u.indexOf('iPhone') > -1.// Whether the browser is iPhone or QQHD
        iPad: u.indexOf('iPad') > -1./ / whether the device
        webApp: u.indexOf('Safari') = = -1.// Whether the web should be a program, without a header and a bottom
        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,... }
Copy the code

Six String substitution

20% is a null character in the URL, & NBSP is a null character in HTML

The space in the replacement string is 20%

function replaceSpace(str){
    if(typeofstr ! = ='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'

Copy the code

reference

  • Commonly used JS methods

conclusion

  • String to generate random color value, random string, URL detection, browser judgment ~~