正则表达式处理html标签

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

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

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

---

对img标签进行修改

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

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

而希望获取的是这样子的

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

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

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

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

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标签进行修改

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

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

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

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