用正则匹配富文本中的文本,并替换其内容

更新日期: 2020-02-24 阅读: 4.1k 标签: 正则

问题描述:

有这样的一段字符串:

"<p id='wise'>123 456 789<br>hello<span title='hello' src='//www.wisewrong.com/img/123.png'>world</span></p>"

这是一段包含了 html 标签信息的富文本,现在需要将其中的文本内容处理为全大写

 

解决方案:

function superTrim(str) {
  // 匹配标签之间的文本
  const reg = /(?<=>)[^>]+(?=<[\/]?\w+.*>)/g; 
  return str.replace(reg, s => s.toUpperCase());
}
const str = "<p id='wise'>123 456 789<br>hello<span title='hello' src='//www.wisewrong.com/img/123.png'>world</span></p>";

superTrim(str);
// "<p id='wise'>123 456 789<br>HELLO<span title='hello' src='//www.wisewrong.com/img/123.png'>WORLD</span></p>"

重点在于正则的编写,其次需要利用字符串的 replace 函数,当第一个入参是正则的时候,第二个参数可以用函数的形式来接受正则的匹配结果,且这个函数的返回值会用来替换被正则匹配到的字符串

基于这个特性,只要正则匹配到了字符串,就可以随便处理了

这里只是举了全大写的例子,实际上还可以做简繁转换、文本格式化等复杂功能


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/9146

相关推荐

js使用正则过滤emoji表情符号

手机端常常会遇到用户输入框,输入emoji,如果是数据库是UTF8,会遇到报错,原因是:UTF-8编码有可能是两个、三个、四个字节。Emoji表情是4个字节,而Mysql的utf8编码最多3个字节,所以数据插不进去。

利用正则表达式去除所有html标签,只保留文字

后台将富文本编辑器中的内容返回到前端时如果带上了标签,这时就可以利用这种方法只保留文字。利用正则表达式去除所有html标签,只保留文字

JavaScript判断字符串包含中文字符的方法总结

JS中判断一个字符串是否包含汉字,下面就介绍2中常用的实现方法:用正则表达式判断、用 Unicode 字符范围判断。

精准准确的统一社会信用代码正则(js)

统一代码为18位,统一代码由十八位的数字或大写英文字母(不适用I、O、Z、S、V)组成,由五个部分组成:第一部分(第1位)为登记管理部门代码,9表示工商部门;(数字或大写英文字母)

最新JS正则大全(常用)

12小时制时间(hh:mm:ss);base64格式;数字/货币金额(支持负数、千分位分隔符);银行卡号(16或19位);中文姓名;新能源车牌号

javascript较全常用的表达正则验证,js中采用test()方法

正则表达式是一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。本文整理了JS较全且实用正则表达式。

js常用正则表达式验证大全(整理详细且实用)

正则表达式对象用来规范一个规范的表达式,本文讲的是JS正则表达式大全(整理详细且实用),包括校验数字、字符、一些特殊的需求等等

JS校验身份证号的合法性

前端表单中有身份证号的校验,下边是用JS来校验身份证号的合法性。中国居民身份证号码编码规则、中国居民身份证校验码算法、JS校验身份证合法性。

正则表达式后行断言 • 探索 ES2018 和 ES2019

先后行断言(Lookaround Assertion)是正则表达式中的一个构造,明确了当前位置的前后字符序列,但没有其他副作用。当前 JavaScript 唯一支持的 Lookaround Assertion 是 先行断言,其匹配当前位置接下来的字符序列

正则匹配身份证有bug你知道么?

在开发中,我们需要验证用户的输入信息,多半采用正则验证,下面就是身份证证号的几种常用的正则表达式:但是这些并不能管用,是不是很气人?这是为什么呢?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!