Java 遍歷List<String> 取出裡面的String 元素以 ‘、’ 頓號拼接
技術標籤:js
建立正則
JS提供字面量與物件兩種方式建立正則表示式
字面量建立
使用//包裹的字面量建立方式是推薦的作法,但它不能在其中使用變數
let hd = "houdunren.com";
console.log(/u/.test(hd));//true
下面嘗試使用 a 變數時將不可以查詢
let hd = "houdunren.com";
let a = "u";
console.log(/a/.test(hd)); //false
雖然可以使用 eval 轉換為js語法來實現將變數解析到正則中,但是比較麻煩,所以有變數時建議使用下面的物件建立方式
let hd = "houdunren.com";
let a = "u";
console.log(eval(`/${a}/`).test(hd)); //true
物件建立
當正則需要動態建立時使用物件方式
let hd = "houdunren.com";
let web = "houdunren";
let reg = new RegExp(web);
console.log(reg.test(hd)); //true
根據使用者輸入高亮顯示內容,支援使用者輸入正則表示式
<body>
<div id= "content">houdunren.com</div>
</body>
<script>
const content = prompt("請輸入要搜尋的內容,支援正則表示式");
//"g"表示全域性模式
const reg = new RegExp(content, "g");
let body = document
.querySelector("#content")
//把字串houdunren.com中的 變數reg中儲存的字串,替換成str(匹配上的字串)
.innerHTML.replace(reg, str => {
return `<span style="color:red">${str}</span>`;
});
document.body.innerHTML = body;
</script>
選擇符
| 這個符號帶表選擇修釋符,也就是 | 左右兩側有一個匹配到就可以。
檢測電話是否是上海或北京的坐機
let tel = "^010-12345678";
//錯誤結果:只匹配 | 左右兩邊任一結果
//d{7,8}7到8位該寫法會導致 010 或者020 也是true
console.log(tel.match(/010|020\-\d{7,8}/));
//正確結果:所以需要放在原子組中使用
console.log(tel.match(/(010|020)\-\d{7,8}/));
匹配字元是否包含houdunren 或 hdcms
const hd = "houdunren";
console.log(/houdunren|hdcms/.test(hd)); //true
字元轉義
轉義用於改變字元的含義,用來對某個字元有多種語義時的處理。
假如有這樣的場景,如果我們想通過正則查詢 / 符號,但是 / 在正則中有特殊的意義。如果寫成 /// 這會造成解析錯誤,所以要使用轉義語法 \ / 來匹配。
const url = "https://www.houdunren.com";
console.log(/https:\/\//.test(url)); //true
使用 RegExp 構建正則時在轉義上會有些區別,下面是物件與字面量定義正則時區別
let price = 12.23;
//含義1: . 除換行外任何字元 含義2: .普通點
//含義1: d 字母d 含義2: \d 數字 0~9
console.log(/\d+\.\d+/.test(price));
//字串中 \d 與 d 是一樣的,所以在 new RegExp 時\d 即為 d
console.log("\d" == "d");
//使用物件定義正則時,可以先把字串列印一樣,結果是字面量一樣的定義就對了
console.log("\\d+\\.\\d+");
let reg = new RegExp("\\d+\\.\\d+");
console.log(reg.test(price));
console.log("\\d+\\.\\d+");
輸出結果
字元邊界
使用字元邊界符用於控制匹配內容的開始與結束約定。
邊界符 | 說明 |
---|---|
^ | 匹配字串的開始 |
$ | 匹配字串的結束,忽略換行符 |
匹配內容必須以www開始
const hd = "www.houdunren.com";
console.log(/^www/.test(hd)); //true
匹配內容必須以.com結束
const hd = "www.houdunren.com";
console.log(/\.com$/.test(hd)); //true
檢測使用者名稱長度為3~6位,且只能為字母。如果不使用 ^與$ 限制將得不到正確結果
<body>
<input type="text" name="username" />
</body>
<script>
document
.querySelector(`[name="username"]`)
//鍵盤抬起時間
.addEventListener("keyup", function() {
//i 不區分大小寫 ^ $ 限制整個字串正能是3到6位,如果不限制 超過3位可以一直加
let res = this.value.match(/^[a-z]{3,6}$/i);
//不滿足為空
console.log(res);
console.log(res ? "正確" : "失敗");
});
</script>
元子字元
元字元是正則表示式中的最小元素,只代表單一(一個)字元
字元列表
元字元 | 說明 | 示例 |
---|---|---|
\d | 匹配任意一個數字 | [0-9] |
\D | 與除了數字以外的任何一個字元匹配 | [^0-9] |
\w | 與任意一個英文字母,數字或下劃線匹配 | [a-zA-Z_] |
\W | 除了字母,數字或下劃線外與任何字元匹配 | [^a-zA-Z_] |
\s | 任意一個空白字元匹配,如空格,製表符\t,換行符\n | [\n\f\r\t\v] |
\S | 除了空白符外任意一個字元匹配 | [^\n\f\r\t\v] |
. | 匹配除換行符外的任意字元 |
使用體驗
匹配任意數字
加上 /g 會一直匹配,如果不加只會匹配一個2,就停下 ,就需要\d\d\d\d
let hd = "houdunren 2010";
console.log(hd.match(/\d/g)); //["2", "0", "1", "0"]
匹配所有電話號碼
let hd = `
張三:010-99999999,李四:020-88888888
`;
//\d{3}匹配三個
let res = hd.match(/\d{3}-\d{7,8}/g);
console.log(res);
獲取所有使用者名稱
let hd = `
張三:010-99999999,李四:020-88888888`;
let res = hd.match(/[^:\d-,]+/g);
console.log(res);
匹配任意非數字
console.log(/\D/.test(2029)); //false
匹配字母數字下劃線
let hd = "[email protected]";
console.log(hd.match(/\w/g)); //["h", "d", "c", "m", "s"]
匹配除了字母,數字或下劃線外與任何字元匹配
console.log(/\W/.test("@")); //true
匹配與任意一個空白字元匹配
console.log(/\s/.test(" ")); //true
console.log(/\s/.test("\n")); //true
匹配除了空白符外任意一個字元匹配
let hd = "[email protected]";
console.log(hd.match(/\S/g)); //[ 'h', 'd', 'c', 'm', 's', '@' ]
如果要匹配點則需要轉義
let hd = `[email protected]`;
console.log(/houdunren.com/i.test(hd)); //true
console.log(/houdunren\.com/i.test(hd)); //false
使用 . 匹配除換行符外任意字元,下面匹配不到hdcms.com 因為有換行符
const url = `
https://www.houdunren.com
hdcms.com
`;
console.log(url.match(/.+/)[0]);
使用/s視為單行模式(忽略換行)時,. 可以匹配所有
let hd = `
<span>
houdunren
hdcms
</span>
`;
let res = hd.match(/<span>.*<\/span>/s);
console.log(res[0]);
正則中空格會按普通字元對待
let tel = `010 - 999999`;
console.log(/\d+-\d+/.test(tel)); //false
console.log(/\d+ - \d+/.test(tel)); //true
所有字元
可以使用 [\s\S] 或 [\d\D] 來匹配所有字元
let hd = `
<span>
houdunren
hdcms
</span>
`;
let res = hd.match(/<span>[\s\S]+<\/span>/);
console.log(res[0]);
模式修飾
正則表示式在執行時會按他們的預設執行方式進行,但有時候預設的處理方式總不能滿足我們的需求,所以可以使用模式修正符更改預設方式。
修飾符 | 說明 |
---|---|
i | 不區分大小寫字母的匹配 |
g | 全域性搜尋所有匹配內容 |
m | 視為多行 |
s | 視為單行忽略換行符,使用. 可以匹配所有字元 |
y | 從 regexp.lastIndex 開始匹配 |
u | 正確處理四個字元的 UTF-16 編碼 |
1. i
將所有houdunren.com 統一為小寫
let hd = "houdunren.com HOUDUNREN.COM";
hd = hd.replace(/houdunren\.com/gi, "houdunren.com");
console.log(hd);
2. g
使用 g 修飾符可以全域性操作內容
let hd = "houdunren";
hd = hd.replace(/u/, "@");
console.log(hd); //沒有使用 g 修飾符是,只替換了第一個
let hd = "houdunren";
hd = hd.replace(/u/g, "@");
console.log(hd); //使用全域性修飾符後替換了全部的 u
3. m
用於將內容視為多行匹配,主要是對 ^和 $ 的修飾
將下面是將以 #數字開始的課程解析為物件結構,學習過後面講到的原子組可以讓程式碼簡單些
let hd = `
#1 js,200元 #
#2 php,300元 #
#9 houdunren.com # 後盾人
#3 node.js,180元 #
`;
// [{name:'js',price:'200元'}]
let lessons = hd.match(/^\s*#\d+\s+.+\s+#$/gm).map(v => {
v = v.replace(/\s*#\d+\s*/, "").replace(/\s+#/, "");
[name, price] = v.split(",");
return { name, price };
});
console.log(JSON.stringify(lessons, null, 2));
u
每個字元都有屬性,如L屬性表示是字母,P 表示標點符號,需要結合 u 模式才有效。其他屬性簡寫可以訪問 屬性的別名 網站檢視。
//使用\p{L}屬性匹配字母
let hd = "houdunren2010.不斷髮佈教程,加油!";
console.log(hd.match(/\p{L}+/u));
//使用\p{P}屬性匹配標點
console.log(hd.match(/\p{P}+/gu));
字元也有unicode文字系統屬性 Script=文字系統,下面是使用 \p{sc=Han} 獲取中文字元 han為中文系統,其他語言請檢視 文字語言表
let hd = `
張三:010-99999999,李四:020-88888888`;
let res = hd.match(/\p{sc=Han}+/gu);
console.log(res);
使用 u 模式可以正確處理四個字元的 UTF-16 位元組編碼
let str = "