JS關(guān)于?replace?取值、替換第幾個(gè)匹配項(xiàng)問題小結(jié)
在日常開發(fā)中,經(jīng)常遇到針對(duì)字符串的替換、截取,知識(shí)點(diǎn)比較碎容易混淆,特此總結(jié)一下,僅供參考。
一、替換第一個(gè)匹配項(xiàng)
字符串替換
let strtest = "0123測(cè)試replace456測(cè)試replace789測(cè)試replace0" console.log("原字符串:" + strtest) let outstr = strtest.replace("測(cè)試","ceshi") console.log("輸出字符串:" + outstr) // 原字符串:0123測(cè)試replace456測(cè)試replace789測(cè)試replace0 // 輸出字符串:0123ceshireplace456測(cè)試replace789測(cè)試replace0
正則表達(dá)式替換
當(dāng)直接在被替換字符串恰后加上 / 時(shí),不添加修飾符,就等同于直接字符串替換。
let strtest = "0123測(cè)試replace456測(cè)試replace789測(cè)試replace0" console.log("原字符串:" + strtest) let outstr = strtest.replace(/測(cè)試/, "ceshi") console.log("輸出字符串:" + outstr) // 原字符串:0123測(cè)試replace456測(cè)試replace789測(cè)試replace0 // 輸出字符串:0123ceshireplace456測(cè)試replace789測(cè)試replace0
二、替換全部匹配項(xiàng)
字符串分組再聯(lián)合
let strtest = '0123測(cè)試replace456測(cè)試replace789測(cè)試replace0'; console.log("原字符串:" + strtest) let arrstr = strtest.split("測(cè)試"); let outstr = arrstr.join("ceshi"); console.log("輸出字符串:" + outstr) // 原字符串:0123測(cè)試replace456測(cè)試replace789測(cè)試replace0 // 輸出字符串:0123ceshireplace456ceshireplace789ceshireplace0
正則表達(dá)式替換
格式:/待替換的字符串/g、/待替換的字符串/mgi。
g:執(zhí)行全局匹配,替換全部匹配項(xiàng);
i:不區(qū)分大小寫;
m:多行匹配。
gim 可所以組合使用。
let strtest = "0123測(cè)試replace456測(cè)試replace789測(cè)試replace0" console.log("原字符串:" + strtest) let outstr = strtest.replace(/測(cè)試/g, "ceshi") // 另一種寫法: // let reg = new RegExp("測(cè)試", "g") // let outstr = strtest.replace(reg, "ceshi") console.log("輸出字符串:" + outstr) // 原字符串:0123測(cè)試replace456測(cè)試replace789測(cè)試replace0 // 輸出字符串:0123ceshireplace456ceshireplace789ceshireplace0
三、替換第 n 個(gè)匹配項(xiàng)
下邊以第二個(gè)為例。
字符串分組再聯(lián)合
思路:先通過被替換項(xiàng)分組,再根據(jù)目標(biāo)位數(shù)把整個(gè)分組分為兩個(gè)部分,在通過替換字符串聯(lián)合。
let num = 2 // 定義替換第二個(gè)匹配項(xiàng) let strtest = '0123測(cè)試replace456測(cè)試replace789測(cè)試replace0'; console.log("原字符串:" + strtest) let arrstr = strtest.split("測(cè)試"); if(arrstr.length < num) return let arrstr1=[],arrstr2=[] for(let ii=0;ii<arrstr.length;ii++){ if(ii < num) arrstr1.push(arrstr[ii]) else arrstr2.push(arrstr[ii]) } let outstr = arrstr1.join("測(cè)試")+"ceshi"+arrstr2.join("測(cè)試"); console.log("輸出字符串:" + outstr) // 原字符串:0123測(cè)試replace456測(cè)試replace789測(cè)試replace0 // (index):59 輸出字符串:0123測(cè)試replace456ceshireplace789測(cè)試replace0
正則表達(dá)式實(shí)現(xiàn)
將第一個(gè)匹配項(xiàng)跳過,并把第二個(gè)匹配項(xiàng)之前的內(nèi)容標(biāo)識(shí)為變量。
let strtest = '0123測(cè)試replace456測(cè)試replace789測(cè)試replace0'; console.log("原字符串:" + strtest) let outstr = strtest.replace(/((?:.*?測(cè)試.*?){1}.*?)測(cè)試/m, "$1-ceshi-") // ?: 表示:其后邊的 pattern 匹配但不獲取。匹配項(xiàng)被標(biāo)識(shí)為 $1,后續(xù)會(huì)引用 // .*? 表示:.* 除 '/n' 之外的任意個(gè)任意字符 // {1} 表示:其前邊的 pattern 出現(xiàn)一次 // /pattern/m 表示: m 全局查詢 console.log("輸出字符串:" + outstr) // 原字符串:0123測(cè)試replace456測(cè)試replace789測(cè)試replace0 // 輸出字符串:0123測(cè)試replace456測(cè)試replace789-ceshi-replace0
參考:https://stackoverflow.com/questions/42943096/replace-nth-match-of-matches-with-regex
四、替換指定標(biāo)記之間的內(nèi)容
字符串分組再聯(lián)合
let strtest = '0123<Object>replace456測(cè)試replace78</Object>9測(cè)試replace0'; let startstr = "<Object>" let endstr = "</Object>" if (strtest.indexOf(startstr) > strtest.indexOf(endstr)) return console.log("原字符串:" + strtest) let arr = strtest.split(startstr) let arr2 = arr[1].split(endstr) let resultstr = arr2[0] let outstr = startstr + resultstr + endstr console.log("輸出字符串:" + outstr) // 原字符串:0123<Object>replace456測(cè)試replace78</Object>9測(cè)試replace0 // 輸出字符串:<Object>replace456測(cè)試replace78</Object> let strtest = '0123<Object>replace456測(cè)試replace78</Object>9測(cè)試replace0'; let startstr = "<Object>" let endstr = "</Object>" if (strtest.indexOf(startstr) > strtest.indexOf(endstr)) return console.log("原字符串:" + strtest) let arr = strtest.split(startstr) let arr2 = arr[1].split(endstr) let resultstr = arr2[0] let outstr = startstr + resultstr + endstr console.log("輸出字符串:" + outstr) // 原字符串:0123<Object>replace456測(cè)試replace78</Object>9測(cè)試replace0 // 輸出字符串:<Object>replace456測(cè)試replace78</Object>
正則表達(dá)式方法 replace()、match()、exec()
替換為指定字符串:( replace() )
let strtest = '0123<Object>replace456測(cè)試replace78</Object>9測(cè)試replace0'; console.log("原字符串:" + strtest) let outstr = strtest.replace(/<Object>(.*?)<\/Object>/m, "-ceshi-") // \ 為轉(zhuǎn)義字符 console.log("輸出字符串:" + outstr) // 原字符串:0123<Object>replace456測(cè)試replace78</Object>9測(cè)試replace0 // 輸出字符串:0123-ceshi-9測(cè)試replace0
取出帶標(biāo)記字符串的內(nèi)容:( match() )
let strtest = '0123<Object>replace456測(cè)試replace78</Object>9測(cè)試replace0'; console.log("原字符串:" + strtest) let outstr = strtest.match(/<Object>(.*?)<\/Object>/m) console.log("輸出字符串:" + outstr) // 原字符串:0123<Object>replace456測(cè)試replace78</Object>9測(cè)試replace0 // 輸出字符串:<Object>replace456測(cè)試replace78</Object>
當(dāng)可能有多個(gè)匹配項(xiàng)時(shí):( exec() )
let strtest = "這是<Object>要提取的內(nèi)容</Object>,還有<Object>另一個(gè)內(nèi)容</Object>" console.log("原字符串:" + strtest) let regex = /<Object>(.*?)<\/Object>/gm const matches = [] let match while ((match = regex.exec(strtest)) !== null) { matches.push(match[1]) console.log(match) } console.log("輸出全部匹配項(xiàng):", matches) // 原字符串:這是<Object>要提取的內(nèi)容</Object>,還有<Object>另一個(gè)內(nèi)容</Object> // (2)?["<Object>要提取的內(nèi)容</Object>", "要提取的內(nèi)容", index: 2, input: "這是<Object>要提取的內(nèi)容</Object>,還有<Object>另一個(gè)內(nèi)容</Object>", groups: undefined] // (2)?["<Object>另一個(gè)內(nèi)容</Object>", "另一個(gè)內(nèi)容", index: 28, input: "這是<Object>要提取的內(nèi)容</Object>,還有<Object>另一個(gè)內(nèi)容</Object>", groups: undefined] // 輸出全部匹配項(xiàng): (2)?["要提取的內(nèi)容", "另一個(gè)內(nèi)容"]
到此這篇關(guān)于JS關(guān)于 replace 取值、替換第幾個(gè)匹配項(xiàng)的文章就介紹到這了,更多相關(guān)js replace 取值、替換第幾個(gè)匹配項(xiàng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)同步于本地時(shí)間的動(dòng)態(tài)時(shí)間顯示方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)同步于本地時(shí)間的動(dòng)態(tài)時(shí)間顯示方法,實(shí)例分析了javascript獲取本地時(shí)間及動(dòng)態(tài)顯示的技巧,并對(duì)實(shí)現(xiàn)代碼進(jìn)行了較為詳盡的分析說明,需要的朋友可以參考下2015-02-02JavaScript隨機(jī)數(shù)生成各種技巧及實(shí)例代碼
這篇文章主要介紹了JavaScript隨機(jī)數(shù)生成各種技巧及實(shí)例代碼,包括生成0到1之間的隨機(jī)浮點(diǎn)數(shù)、指定范圍的隨機(jī)整數(shù)和浮點(diǎn)數(shù)、從數(shù)組中隨機(jī)選擇元素、生成隨機(jī)顏色以及生成指定數(shù)目和范圍的隨機(jī)數(shù),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04學(xué)習(xí)JavaScript正則表達(dá)式
這篇文章主要介紹了JavaScript正則表達(dá)式,詳細(xì)深入的了解JavaScript正則表達(dá)式,從而更熟練掌握J(rèn)avaScript正則表達(dá)式,感興趣的小伙伴們可以參考一下2015-11-11vue使用vue-quill-editor富文本編輯器且將圖片上傳到服務(wù)器的功能
這篇文章主要介紹了vue使用vue-quill-editor富文本編輯器且將圖片上傳到服務(wù)器的功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01js實(shí)現(xiàn)圖片上傳到服務(wù)器和回顯
這篇文章主要介紹了js實(shí)現(xiàn)圖片上傳到服務(wù)器和回顯,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01完美實(shí)現(xiàn)js焦點(diǎn)輪播效果(二)(圖片可滾動(dòng))
這篇文章主要為大家詳細(xì)介紹了完美實(shí)現(xiàn)js焦點(diǎn)輪播效果的相關(guān)代碼,采用輔助圖片實(shí)現(xiàn)圖片無限滾動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03JS平滑無縫滾動(dòng)效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄狫S平滑無縫滾動(dòng)效果的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-05-05