[技術部落格] 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;
}