正则表达式处理html标签

其实也只是最基础的处理..

后台传来的有ckeditor生成的富文本,需要在微信小程序里显示,我使用的是Taro开发的,它的标签RichText无法显示由figure标签包裹的img标签,而且img标签中的图片地址没有加域名端口号,而且显示出来的样式也很奇怪。同时,它也无法显示a标签,所以还需要将超链接中的文本提取出来;所以,两个目标就确立了:

  • img标签进行修改
  • a标签进行修改

img标签进行修改

首先需要提取的式子大概是这样的

1
<figure class="image"><img src="/static/upload/img/1550921548985_startcraft_1.jpeg"><figcaption>dasadsaas</figcaption></figure>

而希望获取的是这样子的

1
<img style="..." src="http://example.com/static/upload/img/1550921548985_startcraft_1.jpeg">

最后编写出的正则表达式如下

1
<\s*figure[^>]*><img\s*src="(.*?)"(.*?)<\s*\/\s*figure>

其中\s*是匹配任意个数的空格,而(.*?)是消极匹配,匹配尽可能少的结果,这样子再配合如下的js代码就可以实现对全部匹配项的替换了

1
2
3
4
5
let content = '......'
const replaceImgtag = /<\s*figure[^>]*><img\s*src="(.*?)"(.*?)<\s*\/\s*figure>/g
content = content.replace(replaceImgtag, function (_, g1) {
return `<img style="max-width:100%;height:auto;display:block;" src="http://example.com${g1}"/>`
})

其中为img标签添加的样式是可以让它自适应屏幕宽度的


a标签进行修改

正则表达式就照葫芦画瓢,如下

1
/<\s*a[^>]*>(.*?)<\s*\/\s*a>/g

将提取出来的结果放到一个span标签中即可,js代码如下

1
2
3
4
5
let content = '.......'
const reRemoveATag = /<\s*a[^>]*>(.*?)<\s*\/\s*a>/g
content = content.replace(reRemoveATag, function (_, g1) {
return `<span>${g1}</span>`
})