前端正则表达式的使用,一些例子

本文介绍了正则表达式的几个基本元素,如w和d,详细解释了它们如何匹配特定的字符集。同时,文章探讨了正则表达式在JavaScript中不同方法的应用,包括exec、test、match、replace和split,以及这些方法在加入全局匹配符g后的行为变化。

一些元字符

\w

匹配字母、数字、下划线。等价于'[A-Za-z0-9_]'。

/g

全局匹配

正则表达式加上参数g之后,表明可以进行全局匹配。此外对于不同的对象方法,/g的含义有所不同,下面给出简要介绍:

(1)对于表达式对象的exec方法,不加入g,则只返回第一个匹配;如果加入g,则第一次执行也返回第一个匹配,再执行返回第二个匹配,依次类推。对于exec方法,表达式加入了g,并不是说执行exec方法就可以返回所有的匹配,而是说加入了g之后,可以通过某种方式得到所有的匹配,这里的“方式”对于exec而言,就是依次执行这个方法即可。

(2)对于表达式对象的test方法,加入g于不加上g没有什么区别。

(3)对于String对象的match方法,不加入g,也只是返回第一个匹配,一直执行match方法也总是返回第一个匹配,加入g,则一次返回所有的匹配(注意这与表达式对象的exec方法不同,对于exec而言,表达式即使加上了g,也不会一次返回所有的匹配)。

(4)对于String对象的replace方法,表达式不加入g,则只替换第一个匹配,如果加入g,则替换所有匹配。

(5)对于String对象的split方法,加上g与不加g是一样的。

(6)对于String对象的search方法,加不加g也是一样的。

\d

匹配一个数字字符。等价于 [0-9]。

详情查看 菜鸟教程

正则表达式:

1. /[^\d]+/g  # 只能是0到9

2./^[0]+[0-9]*$/gi  # 第一位不能为0,第一位之后可以

 

onkeyup 键盘按动时触发事件

HTML:

<input type="text" onkeyup="value=value.replace(/[^\d\/]+/g,'')" value="" >

# 不是[0-9]全部替换为''(空)

小程序:  

if (/[^\w-]+/g.test(e.detail.value.patid))

#当匹配时返回true

VUE:

<input type="text" v-model="registerId" @keyup="registerId=patient.registerId.replace(/[^\w-]+/g,'')">

iView:

<Input v-model="inputVal" size="large"  @on-keyup="inputVal=inputVal.replace(/[\u4e00-\u9fa5]+/g,'')">
<span slot="prepend">值为:</span>
</Input>

 # inputVal 为v-model 绑定的值,为中文汉字是替换为''(空)

java:

import java.util.regex.Pattern;

import java.util.regex.Pattern.Matcher;

String regChinese = "[\u4e00-\u9fa5]{1,}[A-Z0-9a-z]";
Boolean bool = Pattern.compile(regChinese).matcher("大范甘迪A").matches();

# 匹配返回true

<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正则实现参考了前端常用标签去除模式
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值