javascript 常用正则表达式收集

常用正则表达式收集

正则是程序员又爱又恨的一部分了，会用的可以大大提高检验效率，不会用的写一个正则都脑袋疼，所以慢慢积累一些正则方便使用。在写正则之前，一定要先分析清规则，才能写好正则，请大家细细品这句话。

测试用例代码格式

每次只需要修改测试的字符串和正则表达式即可测试

      // 测试用例
      var strArr = ['1234@qq.com', 'wang@126.com', 'wang123@126.com', 'wang123@vip.163.com', 'wang_email@outlook.com', 'wang__email@outlook.com', 'wang_email_@outlook.com', 'wangemail_@outlook.com','wang_emai.l@outlook.com','wang.email@gmail.com'];
      // 正则表达式
      var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
      
      // 无效的字符串
      var aResError = [];
      // 遍历校验字符串
      var aRes = strArr.map(function (item) {
        if (!reg.test(item)) {
          var str = item + ' 正则无效';
          aResError.push(str);
          return str;
        }
        return item + ' 正则有效';
      });

      // 全部测试用例结果
      console.log('全部测试用例结果: ' , aRes);

      // 测试无效用例结果
      console.log('测试无效用例结果: ' , aResError);

邮箱正则

邮箱正则：/^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/

首来看几个合法邮箱的例子：

• 1234@qq.com（纯数字）
• wang@126.com（纯字母）
• wang123@126.com（数字、字母混合）
• wang123@vip.163.com（多级域名）
• wang_email@outlook.com（含下划线 _）
• wang.email@gmail.com（含英语句号 .）

根据对以上邮箱的观察，可将邮箱分为两部分（“@”左边和右边部分）来进行分析：

• 左边部分可以有数字、字母、下划线（_）和英语句号（.），左侧不能出现连续的_和.，且不能在结尾，因此可以表示成：[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*。
• 右边部分是域名，按照域名的规则，可以有数字、字母、短横线（-）和英语句号（.），另外顶级域名一般为 2 ~ 6 个英文字母（比如“cn”、“com”、“site”、“group”、“online”），故可表示为：([A-Za-z0-9-]+.)+[A-Za-z]{2,6}。

要注意两点：

• 考虑到匹配邮箱时字符串的一头一尾不能有其它字符，故要加上开始标志元字符 ^ 和结束标志元字符 $。
• 英语句号（.）是正则表达式的元字符，因此要进行转义（\.）。

手机号正则

手机号正则：/^1[3456789]\d{9}$/

手机号由于运营商繁多，基本上都是1开头的11位数字，忽略掉各运营商的细节可以写个大概的正则，如果你要针对各个运营商和各个号段写正则就需要具体的规则了。

身份证号正则

身份证号正则：/^\d{15}$)|(^\d{17}([0-9]|X)$/

身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X

身份证正则合并：

/^\d{15}$)|(^\d{17}([0-9]|X)$/

数字正则

• 数字：^[0-9]*$
• n位的数字：^\d{n}$
• 至少n位的数字：^\d{n,}$
• m-n位的数字：^\d{m,n}$
• 零和非零开头的数字：^(0|[1-9][0-9]*)$
• 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\.[0-9]{1,2})?$
• 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})$
• 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$
• 有两位小数的正实数：^[0-9]+(\.[0-9]{2})?$
• 有1~3位小数的正实数：^[0-9]+(\.[0-9]{1,3})?$
• 非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
• 非零的负整数：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
• 非负整数：^\d+$ 或 ^[1-9]\d*|0$
• 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
• 非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
• 非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
• 正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
• 负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
• 浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

字符正则

• 汉字：^[\u4e00-\u9fa5]{0,}$
• 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
• 长度为3-20的所有字符：^.{3,20}$
• 由26个英文字母组成的字符串：^[A-Za-z]+$
• 由26个大写英文字母组成的字符串：^[A-Z]+$
• 由26个小写英文字母组成的字符串：^[a-z]+$
• 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
• 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
• 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
• 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
• 可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
• 禁止输入含有~的字符：[^~\x22]+

特殊需求表达式

• 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
• 日期格式：^\d{4}-\d{1,2}-\d{1,2}
• 空白行的正则表达式：\n\s*\r (可以用来删除空白行)
• HTML标记的正则表达式：<(\S*?)[^>]*>.*?|<.*? /> ( 首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$ ) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
• < ：<
• > ：>

    let str = '<span class="RichText ztext CopyrightRichText-richText css-117anjg" options="[object Object]" itemprop="text"><p data-first-child="" data-pid="0YnXC7df">`<span><a class="RichContent-EntityWord css-1esjagr" data-za-not-track-link="true" href="https://www.zhihu.com/search?q=defer&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A3082033451%7D" target="_blank">defer<svg width="10px" height="10px" viewBox="0 0 15 15" class="css-1dvsrp"><path d="M10.89 9.477l3.06 3.059a1 1 0 0 1-1.414 1.414l-3.06-3.06a6 6 0 1 1 1.414-1.414zM6 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" fill="currentColor"></path></svg></a></span>` 和 `async` 是 `&lt;script&gt;` 标签的两个属性，用于控制脚本的加载和执行顺序。它们的主要区别在于加载和执行脚本的时机。</p><p data-pid="YJ8S6wCA">1. `defer` 属性：</p><p data-pid="qBrh2okg">   - 延迟加载脚本，即脚本的下载和页面的解析是串行进行的。</p><p data-pid="XAWAzqJs">   - 脚本会按照它们在文档中出现的顺序依次执行，即在 DOM 解析完成之后按序执行。</p><p data-pid="o4Crz4Mi">   - 多个带有 `defer` 属性的脚本会按照它们在文档中出现的顺序依次执行。</p><p data-pid="GPeUXLsj">   - 脚本的执行时机是在 `DOMContentLoaded` 事件之前，即在整个文档解析完毕之前执行。</p><p data-pid="8y6Ji--U">   - 适用于依赖于 DOM 的脚本，因为它们会在 DOM 解析完成后执行，确保脚本可以访问到所需的 DOM 元素。</p><p class="ztext-empty-paragraph"><br></p><p data-pid="5WYt37pu">2. `async` 属性：</p><p data-pid="XiyAYfUB">   - 异步加载脚本，即脚本的下载和页面的解析是并行进行的。</p><p data-pid="0W1Vrwcf">   - 脚本下载完成后立即执行，无需等待其他资源的加载和页面解析。</p><p data-pid="T0dNL0wE">   - 多个带有 `async` 属性的脚本之间的执行顺序是不确定的，取决于它们的下载完成顺序。</p><p data-pid="55MrQox-">   - 脚本的执行时机是在脚本下载完成后立即执行，可能在 `DOMContentLoaded` 事件之前或之后执行。</p><p data-pid="djhKkTrV">   - 适用于独立的脚本，不依赖于其他脚本或 DOM 的操作。</p><p data-pid="wOzOeo_n">需要注意的是，使用 `defer` 或 `async` 属性的 `&lt;script&gt;` 标签的<span><a class="RichContent-EntityWord css-1esjagr" data-za-not-track-link="true" href="https://www.zhihu.com/search?q=%E8%84%9A%E6%9C%AC%E6%96%87%E4%BB%B6&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A3082033451%7D" target="_blank">脚本文件<svg width="10px" height="10px" viewBox="0 0 15 15" class="css-1dvsrp"><path d="M10.89 9.477l3.06 3.059a1 1 0 0 1-1.414 1.414l-3.06-3.06a6 6 0 1 1 1.414-1.414zM6 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" fill="currentColor"></path></svg></a></span>应该是外部脚本文件（通过 `src` 属性指定的文件），而不是内联脚本。内联脚本会忽略这两个属性。</p><p data-pid="lq5r94nA">综上所述，`defer` 属性用于延迟加载脚本并确保在 DOM 解析完成后按序执行，而 `async` 属性用于异步加载脚本并立即执行，不考虑执行顺序。具体使用哪个属性取决于脚本的依赖关系和执行时机的要求。</p></span>'

    function filterHtmlTag(str) {
      let res = '';
      res = str.replace(/<[^>]+>/g, '');
      res = replaceAll(res, '&lt;', '<')
      res = replaceAll(res, '&gt;', '>')
      return res;
    }

    function replaceAll(str, searchValue, replacement) {
      let res = '';
      res = str.replaceAll(searchValue, replacement)
      return res;
    }

    console.log(filterHtmlTag(str));

参考：
书写一个用于验证邮箱的正则表达式