[技术博客] JS正则活学活用

正则基本语法

正则表达式（Regular Expression）是用单字符串来匹配一系列复合条件字符串的模式，对于乔姆斯基3型语法。

数学定义：

串行AB表示集合 {αβ | α ∈ A ，β ∈ B }

并行A|B表示集合{α | α ∈ A or α ∈ B}

子集复合A* 表示集合{a,b} = {ε,a,b,aa,ab,bb...}

这种定义下的正则表达式能够被有限自动机解析。

重复

• '*' : [0,∞]
• '+' ：[1,∞]
• {a，b}：重复次数的范围从a到b次

转义

同其他编程概念，转义有两种作用：

1. 将规定保留的特殊字符转换为正常字符，
   
   比如"."和"" 是正则中比较特殊的符号，使用""来实现转义，比如a.b表示"a.b"，a*b表示"ab"
2. 将正常字符转换成表示特殊含义的字符，
   
   比如"d"使用""之后就是"\d"表示数字

贪婪&懒惰模式

1. a.*b 表示尽可能多的匹配以a开始，以b结束的字符串
2. a.*?b 表示尽可能少的匹配以a开始，以b结束的字符串

Javascript场景

语法

	//1. string 操作的字符串
	//2. regex 正则表达式
	//3. replacement 需要替换的效果
	string.replace(regex,replacement)

	//demo— /g表示全局替换
	str = str.replace(/raw/g,"dealed");

问题

调用博客园API直接返回的内容不能只用react native中的html解析组件直接使用。

可以使用JS正则进行处理。

解决

需求：<a href="url"><img src = "url" border="0" onload="..."/></a> 替换成 <img src="url"/>

图片解析

//$1表示第一个参数(.*?)匹配到的部分
function ConvertPicture(raw){
    let result = raw.replace(/<a href=(.*?) target="_blank"><img(.*?)<\/a>/g,'<img src=$1 alt="图片"/>');
    return result;
}

超链接解析

同样，其他的转换类似。

需求：<a href="http://www.hao123.com" target="_blank">测试超链接</a> 转换成 [测试超链接]("url")

function ConvertHref(raw){
    let result = raw.replace(/<a href=(.*?) target="_blank">(.*?)<\/a>/g,'["$2"]("$1")');
    return result;
}