[技術博客] 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;
}