写给前端的正则表达式

1. 概览

在 JavaScript 中,使用 // 即可创建一个正则表达式对象,当然也可以使用 new RegExp()

常用的跟正则相关的方法有 matchtest 和 replace
其中 matchreplace 都是字符串上的方法, test 是正则对象上的方法。

下面看具体的图示:

2. 匹配单字符

  1. /reg/ 可以直接匹配具体的字符串 reg

  2. /[arzy]/ 中的中括号[] 则代表匹配 arzy 中的任意单个字符

  3. /[f-h]/ 中的中杠 - 代表匹配字母表顺序中 f 到 h 中的任意单个字符

  4. /[1-3]/ 则代表匹配数字 1 到 3

3. 正则选项

正则对象的后面也可以跟选项,JavaScript 中常用的选项有:

  1. i - 代表忽略大小写

  2. m - 代表多行匹配

  3. g - 代表全局匹配(可以匹配多次)

4. 边界匹配

  1. ^ - 代表匹配字符串的开头

  2. $ - 代表匹配字符串的结尾

5. 字符匹配

  1. . - 可以匹配除了换行符外的任意字符

  2. \d - 可以匹配任意数字

  3. \D - 可以匹配任意数字

  4. \s - 匹配任意空白字符

  5. \S - 匹配任意空白字符

  6. \n - 匹配换行

  7. \w - 它其实就等同于 [A-Za-z0-9_],即匹配字母数字下划线

  8. \W 匹配任何非单词字符。等价于“[^A-Za-z0-9_]"

6. 量词匹配

  1. * - 匹配 0 次或多次

  2. + - 匹配 1 次或多次

  3. ? - 匹配 0 次或 1 次

  4. {3} - 匹配 3 次

  5. {2,4} - 匹配 2、3 或 4 次

  6. {2,} - 匹配 2 次或多次

7. 分组

() 小括号在正则中代表分组,一般在 match 方法中用来返回全匹配加上多个分组结果,如果使用了 g 选项,则只返回全匹配。

在小括号中你可以使用管道符号 |,它代表

8. 特殊字符

匹配特殊符号的时候需要加反斜杠 \

JS 中的特殊字符有 ^ $ \ . * + ? () [] {} |

所以如果你需要匹配星号 *,就需要这样写:\*

9. 取非匹配

匹配除了某个字符的任意字符,需要在中括号[] 中使用 ^

至此 ^具有两个含义:

  1. 如果用于正则表达式的开头,代表匹配字符串的开头

  2. 如果用于中括号 [] 内部,则代表匹配非此字符

10. 以下列出 ?=、?<=、?!、?<! 的使用区别

exp1(?=exp2):查找 exp2 前面的 exp1。

(?<=exp2)exp1:查找 exp2 后面的 exp1。

exp1(?!exp2):查找后面不是 exp2 的 exp1。

(?<!exp2)exp1:查找前面不是 exp2 的 exp1。

 


[ ]:

用多种可能性匹配单个字符

//匹配 "cat" "fat" and "mat" 但不匹配 "bat"
const regexWithCharClass = /[cfm]at/g;

const testString = "cat fat bat mat";
const allMatchingWords = testString.match(regexWithCharClass);// ["cat", "fat", "mat"]

匹配字母表中的字母:使用字符集内的范围 [a-z]


^:

限定开头

/^a.*/ : 匹配的是一个位置, 而不是具体的某个字符,匹配以小写的「a」开头的字符串, 如「alibaba」,但不能匹配「baidu」

取反

/^[^ab].*/ : 匹配除「a」和「b」以外的所有字符串开头的字符串;不匹配「a」和「b」开头的字符串


常用表达式:

包含大小写,数字,特殊字符四种8位以上的密码:/^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{8,}$

手机号:/^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/

大写字母:/^[A-Z]+$/

日期,如: 2000-01-01:/^\d{4}(-)\d{1,2}\1\d{1,2}$/

email地址  /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

国内座机电话,如: 0341-86091234  /\d{3}-\d{8}|\d{4}-\d{7}/

身份证号(15位、18位数字),最后一位是校验位,可能为数字或字符X  /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线组合  /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/

只包含中文  /^[\u4E00-\u9FA5]/

是否小数  /^\d+\.\d+$/

是否电话格式(手机和座机)  /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/

是否8位纯数字  /^[0-9]{8}$/

是否html标签  /<(.*)>.*<\/\1>|<(.*) \/>/

是否qq号格式正确  /^[1-9]*[1-9][0-9]*$/

是否由数字和字母组成  /^[A-Za-z0-9]+$/

是否小写字母组成  /^[a-z]+$/

密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符

/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/

用户名正则,4到16位(字母,数字,下划线,减号)  /^[a-zA-Z0-9_-]{4,16}$/

ipv4地址正则  /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

16进制颜色  /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/

微信号,6至20位,以字母开头,字母,数字,减号,下划线  /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/

中国邮政编码  /^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/

只包含中文和数字  /^(([\u4E00-\u9FA5])|(\d))+$/

非字母  /[^A-Za-z]/

手机号隐藏中间4位 "12345678900".reaplace(/(\d{3})\d{4}(\d{4})/,'$1****$2')


https://mp.weixin.qq.com/s/OQo5pgrsOfMk4Vy-C75EYA

https://mp.weixin.qq.com/s/U1dP7effxMZvLGRa8g5Lrg

<think>好的,用户的问题是关于如何在前端使用正则表达式去除HTML标签。首先,我需要回忆一下正则表达式处理HTML标签的常用方法。根据用户提供的引用内容,比如引用[1]和[2],他们提到使用类似/<[^>]+>/g的正则表达式来匹配所有HTML标签,并用replace方法替换为空字符串。这可能是一个基础的解决方案。 不过,我记得HTML的结构可能比较复杂,比如自闭合标签(如<img />)或者标签内的属性含有>符号的情况,这时候简单的正则可能无法完全覆盖。但用户的需求是前端处理,可能更倾向于简单高效的方法,而不是完全严格的解析。这时候可能需要权衡准确性和性能。 接下来,用户提到的引用[2]中的例子,使用stripHtml函数,这正是用户需要的。所以应该给出一个类似的JavaScript函数示例,展示如何用正则表达式替换掉标签。同时,需要提醒用户这种方法的局限性,比如无法处理<script>或<style>标签内的内容,或者注释等特殊情况。 然后,用户可能还关心如何处理转义字符或者特殊符号,比如<或者>,这时候可能需要额外的处理步骤。但根据引用[2],他们似乎已经用正则表达式处理了标签,可能不需要处理这些实体编码,因为标签本身已经被去除了,剩下的文本中的实体编码可能需要另外处理。 另外,引用[3]和[4]提到不同的正则表达式模式,比如去除特定事件属性或者更复杂的标签匹配。可能需要考虑更全面的正则表达式,比如/<[^>]+>/gi,其中i修饰符用于忽略大小写,确保匹配所有标签。 最后,应该总结步骤,给出代码示例,并指出潜在的问题,推荐使用DOM解析器如DOMParser来更安全地处理,尤其是在处理不可信内容时,避免XSS攻击的风险。这符合前端开发的最佳实践,同时满足用户的需求。</think>要使用正则表达式前端去除HTML标签,可以通过以下步骤实现: ### 步骤说明 1. **基础正则表达式**: 使用`/<[^>]+>/g`匹配所有HTML标签 - `/`:正则表达式开始 - `<`:匹配标签起始符 - `[^>]+`:匹配除`>`外的任意字符(至少1次) - `>`:匹配标签结束符 - `g`:全局匹配模式[^2] 2. **JavaScript实现示例**: ```javascript function stripHTML(html) { return html.replace(/<[^>]+>/g, ''); } // 示例用法 const htmlContent = '<div><p>Hello <b>World</b>!</p></div>'; const plainText = stripHTML(htmlContent); // 输出:"Hello World!" ``` ### 注意事项 1. **局限性**: - 无法处理注释`<!-- content -->` - 不能正确解析`<script>`/`<style>`标签内的内容 - 可能误删含`<`符号的非标签内容(如数学公式) 2. **增强方案**: ```javascript // 改进版正则(包含注释处理) html.replace(/(<([^>]+)>|<!--[\s\S]*?-->)/gi, ''); ``` 3. **安全建议**: 对用户输入内容推荐使用`DOMParser`: ```javascript function safeStripHTML(html) { const doc = new DOMParser().parseFromString(html, 'text/html'); return doc.body.textContent || ""; } ``` [^1]: 基础正则表达式方法参考了HTML标签处理通用方案 [^2]: JavaScript正则实现参考了前端常用标签去除模式
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值