兩年前專門學過正則表達式的基本用法，之后很少用到，現(xiàn)在已經忘的差不多了?，F(xiàn)在重新學習并記錄，便于查看。記憶力不好，不常用的東西從來都是記不住的。
一、正則表達式的基本用法
語法：
/正則表達式主體/修飾符(可選)
實例：var pattern = /helloworld/i;
1.修飾符
-
i執(zhí)行對大小寫不敏感的匹配 -
g執(zhí)行全局匹配（查找所有匹配而非在找到第一個匹配后停止） -
m執(zhí)行多行匹配
2.方括號
-
[abc]查找方括號之間的任何字符 -
[^abc]查找任何不在方括號之間的字符 -
[0-9]查找任何從 0 至 9 的數(shù)字 -
[a-z]查找任何從小寫 a 到小寫 z 的字符 -
[A-Z]查找任何從大寫 A 到大寫 Z 的字符 -
[A-z]查找任何從大寫 A 到小寫 z 的字符 -
(x|y)查找任何以 | 分隔的選項
3.元字符
-
.查找單個字符，除了換行和行結束符 -
\w查找單詞字符 -
\W查找非單詞字符 -
\d查找數(shù)字 -
\D查找非數(shù)字 -
\s查找空白字符 -
\S查找非空白字符 -
\n查找換行符 -
\b匹配單詞邊界 -
\B匹配非單詞邊界
4.量詞
-
n+匹配任何包含至少一個 n 的字符串 -
n*匹配任何包含零個或多個 n 的字符串 -
n?匹配任何包含零個或一個 n 的字符串 -
^n匹配任何開頭為 n 的字符串 -
n$匹配任何結尾為 n 的字符串 -
?=n匹配任何其后緊接指定字符串 n 的字符串
5.常用方法
- search() 方法用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，并返回子串的起始位置。
let str = 'Hello World';
//指定字符串搜索
str.search('World'); //6
//匹配正則表達式搜索
str.search(/World/); //6
//匹配正則表達式搜索，區(qū)分大小寫
str.search(/world/); //-1
//匹配正則表達式搜索，不區(qū)分大小寫
str.search(/world/i); //6
- replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
let str = 'Hello World';
//替換指定字符串
str.replace('World', 'Apple'); //Hello Apple
//替換與正則表達式匹配的子串
str.replace(/World/, 'Apple'); //Hello Apple
//替換與正則表達式匹配的子串，區(qū)分大小寫
str.replace(/world/, 'Apple'); //Hello World
//替換與正則表達式匹配的子串，不區(qū)分大小寫
str.replace(/world/i, 'Apple'); //Hello Apple
- match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。這個方法的行為在很大程度上有賴于 regexp 是否具有標志 g。如果 regexp 沒有標志 g，那么 match() 方法就只能在 stringObject 中執(zhí)行一次匹配。如果沒有找到任何匹配的文本， match() 將返回 null。否則，它將返回一個數(shù)組，其中存放了與它找到的匹配文本有關的信息。
let str = 'Hello World';
str.match(/World/); //["World", index: 6, input: "Hello World", groups: undefined]
str.match(/\b[A-z]+\b/); //["Hello", index: 0, input: "Hello World", groups: undefined]
str.match(/\b[A-z]+\b/g); //["Hello", "World"]
- test() 方法用于檢測一個字符串是否匹配某個模式，如果字符串中含有匹配的文本，則返回 true，否則返回 false。
let str = 'Hello World';
let pattern = /World/;
pattern.test(str); //true
也可以直接這么寫：/World/.test('Hello World')
- exec() 方法用于檢索字符串中的正則表達式的匹配。該函數(shù)返回一個數(shù)組，其中存放匹配的結果。如果未找到匹配，則返回值為 null。
let str = 'Hello World';
let pattern = /World/;
pattern.exec(str); //["World", index: 6, input: "Hello World", groups: undefined]
以上列出的都比較常見，如果要了解更詳細的信息，可以訪問 w3school 的JavaScript RegExp參考手冊或者菜鳥教程的正則表達式教程。
二、項目中常用到的一些正則表達式
項目中常用的正則表達式都比較簡單，可以自己寫，也可以在網上找，例如菜鳥教程的正則表達式在線測試，編程獅的正則表達式在線生成工具，再或者 github 上 start 數(shù)比較高的一些正則表達式隨記等等。網上資源實在太多，就不一一列舉了。
三、過濾富文本圖片
在這里記錄一個比較具體的例子，有時候會碰到這樣的需求，頁面里邊顯示富文本，富文本里邊可能包含圖片、音頻或者視頻，為了讓頁面內容顯示的統(tǒng)一美觀，可能需要把圖片等的過濾一下，先替換成統(tǒng)一的圖標，然后點擊圖標查看具體內容。真實效果如下圖所示：
過濾富文本圖片.jpg
以下代碼比較簡單，只處理了過濾圖片的邏輯，過濾音頻和視頻都是類似的，具體還得看項目需求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
img {
width: 200px;
}
.img-icon {
width: 20px;
vertical-align: sub;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<span>第一張圖片</span>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3383755366,4243257849&fm=26&gp=0.jpg" />，
<span>第二張圖片</span>
<img src="http://img1.imgtn.bdimg.com/it/u=1663134360,1286341285&fm=26&gp=0.jpg" />
</div>
<h3>過濾圖片顯示為小圖標:</h3>
<div id="newBox"></div>
<script>
function handleRichHtmlImg(html) {
let replacedHtml = html.replace(/<?img[^>]*?>/g, str => {
const matchArr = str.match(/src="(.*?)"/) || [];
let imgSrc = matchArr[1] || '';
//這里替換顯示的內容根據(jù)需求而定
let defaultImg = '<img class="img-icon" src="https://ae01.alicdn.com/kf/H9a480ccb053d43ff89ed22a89982337dB.png" data-img-src=' + imgSrc + ' />';
str = str.replace(/<(img).*?>/g, defaultImg);
return str;
})
return replacedHtml;
}
var box = document.getElementById('box');
var newBox = document.getElementById('newBox');
var html = handleRichHtmlImg(box.innerHTML);
newBox.innerHTML = html;
newBox.onclick = function handleImgClick(e) {
console.log('e', e);
console.log('e.target', e.target);
console.log('當前圖片的真實地址', e.target.getAttribute('data-img-src'));
//todo...比如彈框顯示放大圖片等操作
}
</script>
</body>
</html>
