关于html字符串正则判断和匹配

前言

最近在写一个组件，需要传入html字符串，里面用到了很多正则来判断是否是html标签或者匹配标签内的文本等，这里记录下。

如何判断传入的字符串包含一个闭合html标签

• /<\/?[a-z][\s\S]*>/i

  这个其实并不能判断标签闭合的完整性或者顺序等，只是判断字符串中是否有html标签(包含自定义标签)，这对我来说足够了。这给正则里面需要学习的就是[\s\S]可以代表一切字符串。

• /<([a-z][\s\S]*)>.*<\/\1>/i

  这个就更加规范一些可以匹配一个完整闭合的标签，\1代表前面的圆括号内捕获的内容，是正则的比较高级的用法。

如何匹配出一个标签内的文本内容

str = str.replace(/<title>[\s\S]*?<\/title>/, '<title>' + newTitle + '<\/title>');

• 最好用一个语义化标签或者自定义标签来做匹配，如果使用div这种一段字符串中可能有好多个的，问题会很多。
• [sS]*代表任意字符
• *后面的?代表非贪婪模式，因为正则匹配默认都是贪婪模式的

总结

用正则从html标签中匹配文字其实是一种很低效的方式，不到必要时候也没必要去使用，有篇文章深刻的批判了这种行为有兴趣可以看一下。