使用正则表达式处理常见html标签问题

在做富文本编辑时总是会处理一些html标签，刚好复习一下上篇内容，自己写了一个例子

let str = '<div class="test">正则表达式测试<span style="background-color:red">红色</span><span style="background-color:green">绿色</span><span style="background-color:blue">蓝色</span></div>'

正则一：去除所有标签

let str1 = str.replace(/<.*?>/g,'')
 console.log(str1)

str1打印出为 ‘正则表达式测试红色红色红色’

正则二：去除所有标签除了span标签

let str2 = str.replace( /<(?!span|\/span).*?>/g,'')
console.log(str2)

str2打印出为 “正则表达式测试红色绿色蓝色”

正则三：去除所有标签并将span标签替换为特殊字符

let str3 = str.replace( /<(?!span|\/span).*?>/g,'').replace(/<(span .*?>|\/span>)/g,'#')
console.log(str3)

str3打印出为"正则表达式测试#红色##绿色##蓝色#"

正则四：将字符串中特殊字符转换为某个特定标签

let  str4 = '正则表达式测试#红色##绿色##蓝色#'
str4.replace(/#(.*?)#/g,'<span style="backround-color:red">$1</span>')
console.log(str4)

str4打印出为"正则表达式测试红色绿色蓝色"

正则五：去除所有标签并将img标签的src内容显示

let str5 = '<div class="text">正则表达式测试2<span  style="background-color:red">红色</span><img src="https://img-blog.csdnimg.cn/20190221164504746.png"/></div>'
//只保留img标签  "正则表达式测试2红色<img src="https://img-blog.csdnimg.cn/20190221164504746.png"/>"
let str6 = str5.replace(/<(?!img).*?>/g,'')
// 将<img src="https://img-blog.csdnimg.cn/20190221164504746.png"/>替换为src内的值
str6.replace(/<img src="(.*?)"\/>/g,'$1')
console.log(str6)

str6打印出"正则表达式测试2红色https://img-blog.csdnimg.cn/20190221164504746.png"