js正則實現從一段復雜html代碼字符串中匹配並處理特定信息


問題:

      現在要從一個復雜的html代碼字符串(包含各種html標簽,數字、中文等信息)中找到某一段特別的信息(被一對“|”包裹着),並對他進行加粗、加下滑線處理。

解決思路:

1、用正則匹配“|”出現的次數,處理剛好出現2次的(html字符串中一般不會含有這個字符)

2、使用正則分組,獲取“|”之間的內容,並進行替換(添加樣式)

代碼:

function specialDeal(){  
   htmlStr = htmlStr.replace(/ /, '');  
   var reg0 = new RegExp("\\|", "g");  
  var array = htmlStr.match(reg0);  
 //當且僅當出現"|"的次數等於2時,對"|"之間的內容進行加粗、並加下划線  
 if (array != null && array.size() == 2) {  
   var reg1=new RegExp("([^\\|]*)(\\|)([^\\|]*)(\\|)([^\\|]*)", "ig");  
 var result = reg1.exec(htmlStr);  
        if (result) {  
            htmlStr = htmlStr.replace(reg1,result[1] + "<u><b>" + result[3] + "</b></u>" + result[5]);  
        }  
    }  
    return htmlStr;  
}  

正則表達式中/i,/g,/ig,/gi,/m的區別和含義

/i (忽略大小寫)
/g (全文查找出現的所有匹配字符)
/m (多行查找)
/gi(全文查找、忽略大小寫)
/ig(全文查找、忽略大小寫)

知識點大梳理

js正則表達式的編寫、js正則常用到的幾個方法:match、exec、replace

1、js正則表達

在編寫正則的時候,如果使用RegExp對象,js正則表達式寫在字符串里面,特別需要注意轉義。

Js代碼  
var reg0=new RegExp("(<span[^>]*(Courier New)[^>]*>)(\\w*)", "ig");  

 等價於:

var reg0=/(<span[^>]+Courier New[^>]+>)(\w*)/ig;  

修飾符

修飾符描述
i 執行對大小寫不敏感的匹配。
g

執行全局匹配(查找所有匹配而非在找到第一個匹配后停止)。

m 執行多行匹配。

方括號

方括號用於查找某個范圍內的字符:

表達式描述
[abc] 查找方括號之間的任何字符。
[^abc] 查找任何不在方括號之間的字符。
[0-9] 查找任何從 0 至 9 的數字。
[a-z] 查找任何從小寫 a 到小寫 z 的字符。
[A-Z] 查找任何從大寫 A 到大寫 Z 的字符。
[A-z] 查找任何從大寫 A 到小寫 z 的字符。
[adgk] 查找給定集合內的任何字符。
[^adgk] 查找給定集合外的任何字符。
(red|blue|green) 查找任何指定的選項。

元字符

元字符(Metacharacter)是擁有特殊含義的字符:

元字符描述
. 查找單個字符,除了換行和行結束符。
\w 查找單詞字符。
\W 查找非單詞字符。
\d 查找數字。
\D 查找非數字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配單詞邊界。
\B 匹配非單詞邊界。
\0 查找 NUL 字符。
\n 查找換行符。
\f 查找換頁符。
\r 查找回車符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八進制數 xxx 規定的字符。
\xdd 查找以十六進制數 dd 規定的字符。
\uxxxx 查找以十六進制數 xxxx 規定的 Unicode 字符。

量詞

量詞描述
n+ 匹配任何包含至少一個 n 的字符串。
n* 匹配任何包含零個或多個 n 的字符串。
n? 匹配任何包含零個或一個 n 的字符串。
n{X} 匹配包含 X 個 n 的序列的字符串。
n{X,Y} 匹配包含 X 或 Y 個 n 的序列的字符串。
n{X,} 匹配包含至少 X 個 n 的序列的字符串。
n$ 匹配任何結尾為 n 的字符串。
^n 匹配任何開頭為 n 的字符串。
?=n 匹配任何其后緊接指定字符串 n 的字符串。
?!n 匹配任何其后沒有緊接指定字符串 n 的字符串。

RegExp 對象屬性

FF: Firefox, IE: Internet Explorer

屬性描述FFIE
global RegExp 對象是否具有標志 g。 1 4
ignoreCase RegExp 對象是否具有標志 i。 1 4
lastIndex 一個整數,標示開始下一次匹配的字符位置。 1 4
multiline RegExp 對象是否具有標志 m。 1 4
source 正則表達式的源文本。 1 4

 

2、Match()方法

定義和用法

match() 方法可在字符串內檢索指定的值,或找到一個或多個正則表達式的匹配。

該方法類似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。

語法

stringObject.match(searchvalue)
stringObject.match(regexp)
參數描述
searchvalue 必需。規定要檢索的字符串值。
regexp 必需。規定要匹配的模式的 RegExp 對象。如果該參數不是 RegExp 對象,則需要首先把它傳遞給 RegExp 構造函數,將其轉換為 RegExp 對象。

返回值

存放匹配結果的數組。該數組的內容依賴於 regexp 是否具有全局標志 g。

說明

match() 方法將檢索字符串 stringObject,以找到一個或多個與 regexp 匹配的文本。這個方法的行為在很大程度上有賴於 regexp 是否具有標志 g。

如果 regexp 沒有標志 g,那么 match() 方法就只能在 stringObject 中執行一次匹配。如果沒有找到任何匹配的文本, match() 將返回 null。否則,它將返回一個數組,其中存放了與它找到的匹配文本有關的信息。該數組的第 0 個元素存放的是匹配文本,而其余的元素存放的是與正則表達式的子表達式匹配的文本。除了這些常規的數組元素之外,返回的數組還含有兩個對象屬性。 index 屬性聲明的是匹配文本的起始字符在 stringObject 中的位置,input 屬性聲明的是對 stringObject 的引用。

如果 regexp 具有標志 g,則 match() 方法將執行全局檢索,找到 stringObject 中的所有匹配子字符串。若沒有找到任何匹配的子串,則返回 null。如果找到了一個或多個匹配子串,則返回一個數組。不過全局匹配返回的數組的內容與前者大不相同,它的數組元素中存放的是 stringObject 中所有的匹配子串,而且也沒有 index 屬性或 input 屬性。

注意:在全局檢索模式下,match() 即不提供與子表達式匹配的文本的信息,也不聲明每個匹配子串的位置。如果您需要這些全局檢索的信息,可以使用 RegExp.exec()。

 

3、exec()方法

定義和用法

exec() 方法用於檢索字符串中的正則表達式的匹配。

語法

RegExpObject.exec(string)
參數 描述
string 必需。要檢索的字符串。

返回值

返回一個數組,其中存放匹配的結果。如果未找到匹配,則返回值為 null。

說明

exec() 方法的功能非常強大,它是一個通用的方法,而且使用起來也比 test() 方法以及支持正則表達式的 String 對象的方法更為復雜。

如果 exec() 找到了匹配的文本,則返回一個結果數組。否則,返回 null。此數組的第 0 個元素是與正則表達式相匹配的文本,第 1 個元素是與 RegExpObject 的第 1 個子表達式相匹配的文本(如果有的話),第 2 個元素是與 RegExpObject 的第 2 個子表達式相匹配的文本(如果有的話),以此類推。除了數組元素和 length 屬性之外,exec() 方法還返回兩個屬性。index 屬性聲明的是匹配文本的第一個字符的位置。input 屬性則存放的是被檢索的字符串 string。我們可以看得出,在調用非全局的 RegExp 對象的 exec() 方法時,返回的數組與調用方法 String.match() 返回的數組是相同的。

但是,當 RegExpObject 是一個全局正則表達式時,exec() 的行為就稍微復雜一些。它會在 RegExpObject 的 lastIndex 屬性指定的字符處開始檢索字符串 string。當 exec() 找到了與表達式相匹配的文本時,在匹配后,它將把 RegExpObject 的 lastIndex 屬性設置為匹配文本的最后一個字符的下一個位置。這就是說,您可以通過反復調用 exec() 方法來遍歷字符串中的所有匹配文本。當 exec() 再也找不到匹配的文本時,它將返回 null,並把 lastIndex 屬性重置為 0。

提示和注釋

重要事項:如果在一個字符串中完成了一次模式匹配之后要開始檢索新的字符串,就必須手動地把 lastIndex 屬性重置為 0。

提示:請注意,無論 RegExpObject 是否是全局模式,exec() 都會把完整的細節添加到它返回的數組中。這就是 exec() 與 String.match() 的不同之處,后者在全局模式下返回的信息要少得多。因此我們可以這么說,在循環中反復地調用 exec() 方法是唯一一種獲得全局模式的完整模式匹配信息的方法。

 

4、replace()方法

定義和用法

replace() 方法用於在字符串中用一些字符替換另一些字符,或替換一個與正則表達式匹配的子串。

語法

stringObject.replace(regexp/substr,replacement)
參數 描述
regexp/substr

必需。規定子字符串或要替換的模式的 RegExp 對象。

請注意,如果該值是一個字符串,則將它作為要檢索的直接量文本模式,而不是首先被轉換為 RegExp 對象。

replacement 必需。一個字符串值。規定了替換文本或生成替換文本的函數。

返回值

一個新的字符串,是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的。

說明

字符串 stringObject 的 replace() 方法執行的是查找並替換的操作。它將在 stringObject 中查找與 regexp 相匹配的子字符串,然后用 replacement 來替換這些子串。如果 regexp 具有全局標志 g,那么 replace() 方法將替換所有匹配的子串。否則,它只替換第一個匹配子串。

replacement 可以是字符串,也可以是函數。如果它是字符串,那么每個匹配都將由字符串替換。但是 replacement 中的 $ 字符具有特定的含義。如下表所示,它說明從模式匹配得到的字符串將用於替換。

字符 替換文本
$1、$2、...、$99 與 regexp 中的第 1 到第 99 個子表達式相匹配的文本。
$& 與 regexp 相匹配的子串。
$` 位於匹配子串左側的文本。
$' 位於匹配子串右側的文本。
$$ 直接量符號。

注意:ECMAScript v3 規定,replace() 方法的參數 replacement 可以是函數而不是字符串。在這種情況下,每個匹配都調用該函數,它返回的字符串將作為替換文本使用。該函數的第一個參數是匹配模式的字符串。接下來的參數 是與模式中的子表達式匹配的字符串,可以有 0 個或多個這樣的參數。接下來的參數是一個整數,聲明了匹配在 stringObject 中出現的位置。最后一個參數是 stringObject 本身。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM