Regular Expressions all in one

Regular Expressions all in one Regular Expressions Cheatsheet js 模板引擎 js template engine

Regular Expressions all in one

Regular Expressions Cheatsheet

​​https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet​​

否定或补充字符集

​​https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges​​

​​https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions​​

Regular Expressions Cheatsheet

​​https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet​​

const log = console.log;

// a~z
const reg = /[a-z]/;

reg.test(`a`);
// true
reg.test(`z`);
// true

reg.test(`A`);
// false
reg.test(`Z`);
// false

js 模板引擎

js template engine

// templateEngine
const templateEngine = (str = ``, data = {}) => {
  const reg = /{{([^{}]+)?}}/g;
  let match, paths, key,template;

  while (match = reg.exec(str)) {
    console.log(`match`, match);
    templateHolder = match[0];
    // {{varibale}}
    key = match[1];
    // varibale
    paths = key.split('.');
    // ["k1", "k2"]
    console.log(`paths`, paths);
    let obj = data;
    // 遍历多级属性
    for (let i = 0; i < paths.length; i++) {
      obj = obj[paths[i]];
    }
    // 模板替换
    str = str.replace(template, obj);
  }
  return str;
}

const template = `<section><div>{{name}}</div><div>{{infos.city}}</div></section>`;

const data = {
  name: 'xgqfrms',
  infos:{
    city: 'ufo',
  }
}

templateEngine(template, data);
//"<section><div>xgqfrms</div><div>ufo</div></section>"

/*

match (2) ["{{name}}", "name", index: 14, input: "<section><div>{{name}}</div><div>{{infos.city}}</div></section>", groups: undefined]

paths ["name"]

match (2) ["{{infos.city}}", "infos.city", index: 33, input: "<section><div>{{name}}</div><div>{{infos.city}}</div></section>", groups: undefined]

paths (2) ["infos", "city"]

"<section><div>{{name}}</div><div>{{infos.city}}</div></section>"


*/


// const template = `<section><div>{{name}}</div><div>{{city}}</div></section>`;
// "<section><div>xgqfrms</div><div>undefined</div></section>"

js 金融数字格式化

千分位格式

const moneyFormat = num => {
  const str = num.toString();
  const len = str.length;
  if (len <= 3) {
    return str;
  } else {
    // 判断是否有小数, 截取小数部分
    const decimals = str.indexOf('.') > -1 ? str.split('.')[1] : ``;
    let foot = '';
    if(decimals) {
      foot = '.' + decimals;
    }
    let remainder = len % 3;
    if (remainder > 0) {
      // 不是 3 的整数倍, 有 head, 如（1234567.333 => 1, 234, 567.333）
      const head = str.slice(0, remainder) + ',';
      const body = str.slice(remainder, len).match(/\d{3}/g).join(',');
      return head + body + foot;
      // return str.slice(0, remainder) + ',' + str.slice(remainder, len).match(/\d{3}/g).join(',') + temp;
    } else {
      // 是 3 的整数倍, 无 head, 如（123456.333 => 123, 456.333）
      const body = str.slice(0, len).match(/\d{3}/g).join(',');
      return body + foot;
      // return str.slice(0, len).match(/\d{3}/g).join(',') + temp;
    }
  }
}

// `123456`.slice(0, 6).match(/\d{3}/);
// ["123", index: 0, input: "123456", groups: undefined]
// regex match return ???

// `123456`.slice(0, 6).match(/\d{3}/g);
// ["123", "456"]
// regex match g return all grounds

moneyFormat(123456.33);
// '123,456.33'

moneyFormat(123.33);
// '123.33'

refs

​​https://regexper.com/​​

Error

// space bug ❌
 /{{([^{}]+)?}}/g
// 1 whitespace bug

OK

const regex = /{{([^{}]+)?}}/g

// no space ✅
{{([^{}]+)?}}
// no space ✅
/{{([^{}]+)?}}/g

/\{\{([^{}]+)?\}\}/g

refs

​

Regular Expression 学习笔记

​​https://www.imooc.com/u/1066707/notepad/706​​

---

​​ ​​

---

©xgqfrms 2012-2020

xgqfrms