Baseline Widely available
replace()
æ¹æ³è¿åä¸ä¸ªæ°å符串ï¼å
¶ä¸ä¸ä¸ªãå¤ä¸ªæææå¹é
ç pattern
è¢«æ¿æ¢ä¸º replacement
ãpattern
å¯ä»¥æ¯å符串æ RegExp
ï¼replacement
å¯ä»¥æ¯å符串æä¸ä¸ªå¨æ¯æ¬¡å¹é
æ¶è°ç¨ç彿°ã妿 pattern
æ¯å符串ï¼ååªä¼æ¿æ¢ç¬¬ä¸ä¸ªå¹é
项ãåå§çå符串ä¸ä¼æ¹åã
const paragraph = "I think Ruth's dog is cuter than your dog!";
console.log(paragraph.replace("Ruth's", "my"));
// Expected output: "I think my dog is cuter than your dog!"
const regex = /Dog/i;
console.log(paragraph.replace(regex, "ferret"));
// Expected output: "I think Ruth's ferret is cuter than your dog!"
è¯æ³
replace(pattern, replacement)
åæ°
pattern
å¯ä»¥æ¯å符串æè
ä¸ä¸ªå¸¦æ Symbol.replace
æ¹æ³ç对象ï¼å
¸åçä¾åå°±æ¯æ£å表达å¼ã任使²¡æ Symbol.replace
æ¹æ³çå¼é½ä¼è¢«å¼ºå¶è½¬æ¢ä¸ºå符串ã
replacement
å¯ä»¥æ¯å符串æå½æ°ã
pattern
å¹é
çååç¬¦ä¸²ãæ¯æä¸äºç¹æ®çæ¿æ¢æ¨¡å¼ï¼è¯·åé
ä¸é¢çæå®å符串ä½ä¸ºæ¿æ¢é¡¹é¨åãä¸ä¸ªæ°çå符串ï¼å ¶ä¸ä¸ä¸ªãå¤ä¸ªæææçå¹é 项é½è¢«æå®çæ¿æ¢é¡¹æ¿æ¢ã
æè¿°è¯¥æ¹æ³å¹¶ä¸æ¹åè°ç¨å®çå符串æ¬èº«ï¼èæ¯è¿åä¸ä¸ªæ°çå符串ã
å符串模å¼åªä¼è¢«æ¿æ¢ä¸æ¬¡ãè¦æ§è¡å
¨å±æç´¢åæ¿æ¢ï¼è¯·ä½¿ç¨å¸¦æ g
æ å¿çæ£åè¡¨è¾¾å¼æä½¿ç¨ replaceAll()
ã
妿 pattern
æ¯ä¸ä¸ªå¸¦æ Symbol.replace
æ¹æ³ç对象ï¼å
æ¬ RegExp
对象ï¼ï¼åè¯¥æ¹æ³å°è¢«è°ç¨ï¼ä¼ å
¥ç®æ å符串å replacement
ä½ä¸ºåæ°ãå®çè¿åå¼æä¸º replace()
çè¿åå¼ãå¨è¿ç§æ
åµä¸ï¼replace()
çè¡ä¸ºå®å
¨ç± [Symbol.replace]()
æ¹æ³å®ä¹ââä¾å¦ï¼ä¸é¢ç说æä¸æå°çä»»ä½"æè·ç»"é½å®é
䏿¯ç± RegExp.prototype[Symbol.replace]
æä¾çåè½ã
妿 pattern
æ¯ä¸ä¸ªç©ºå符串ï¼åæ¿æ¢é¡¹å°è¢«æå
¥å°å符串çå¼å¤´ã
"xxx".replace("", "_"); // "_xxx"
replace()
æ¿æ¢å¤æ¬¡çå¯ä¸æ
嵿¯ä¼ å
¥å¸¦æ g
æ å¿çæ£å表达å¼ãæå
³æ£å表达å¼å±æ§ï¼ç¹å«æ¯ sticky æ å¿ï¼å¦ä½ä¸ replace()
交äºçæ´å¤ä¿¡æ¯ï¼è¯·åé
RegExp.prototype[Symbol.replace]()
ã
æ¿æ¢å符串å¯ä»¥å æ¬ä»¥ä¸ç¹æ®æ¿æ¢æ¨¡å¼ï¼
æ¨¡å¼ æå ¥å¼$$
æå
¥ä¸ä¸ª "$"
ã $&
æå
¥å¹é
çåå符串ã $`
æå
¥å¹é
åå符串ä¹åçåç¬¦ä¸²çæ®µã $'
æå
¥å¹é
åå符串ä¹åçåç¬¦ä¸²çæ®µã $n
æå
¥ç¬¬ n
ï¼ç´¢å¼ä» 1 å¼å§ï¼ä¸ªæè·ç»ï¼å
¶ä¸ n
æ¯å°äº 100 çæ£æ´æ°ã $
æå
¥å称为 Name
çå½åæè·ç»ã
åªæå½ pattern
åæ°æ¯ä¸ä¸ª RegExp
对象æ¶ï¼$n
å $<Name>
æå¯ç¨ã妿 pattern
æ¯åç¬¦ä¸²ï¼æè
ç¸åºçæè·ç»å¨æ£å表达å¼ä¸ä¸åå¨ï¼å该模å¼å°è¢«æ¿æ¢ä¸ºä¸ä¸ªåé¢éãå¦æè¯¥ç»åå¨ä½æªå¹é
ï¼å ä¸ºå®æ¯ä¸ä¸ªåæ¯çä¸é¨åï¼ï¼åå°ç¨ç©ºåç¬¦ä¸²æ¿æ¢å®ã
"foo".replace(/(f)/, "$2");
// "$2oo"ï¼æ£åè¡¨è¾¾å¼æ²¡æç¬¬äºä¸ªç»
"foo".replace("f", "$1");
// "$1oo"ï¼pattern æ¯ä¸ä¸ªåç¬¦ä¸²ï¼æä»¥å®æ²¡æä»»ä½ç»
"foo".replace(/(f)|(g)/, "$2");
// "oo"ï¼ç¬¬äºä¸ªç»åå¨ä½æªå¹é
æå®å½æ°ä½ä¸ºæ¿æ¢é¡¹
ä½ å¯ä»¥å°ç¬¬äºä¸ªåæ°æå®ä¸ºå½æ°ãå¨è¿ç§æ åµä¸ï¼å¹é 宿åå°è°ç¨è¯¥å½æ°ã彿°çç»æï¼è¿åå¼ï¼å°ç¨ä½æ¿æ¢å符串ã
夿³¨ï¼ ä¸è¿°ç¹æ®æ¿æ¢æ¨¡å¼ä¸éç¨äºæ¿æ¢å¨å½æ°è¿åçå符串ã
è¯¥å½æ°å ·æä»¥ä¸ç¾åï¼
function replacer(match, p1, p2, /* â¦, */ pN, offset, string, groups) {
return replacement;
}
è¯¥å½æ°çåæ°å¦ä¸æç¤ºï¼
match
å¹é
çåå符串ãï¼å¯¹åºäºä¸é¢ç $&
ãï¼
p1, p2, â¦, pN
妿 replace()
ç第ä¸ä¸ªåæ°æ¯ RegExp
对象ï¼å为æè·ç»ï¼å
æ¬å½åæè·ç»ï¼æ¾å°ç第 n
个å符串ãï¼å¯¹åºäºä¸é¢ç $1
ã$2
çãï¼ä¾å¦ï¼å¦æ pattern
æ¯ /(\a+)(\b+)/
ï¼å p1
æ¯ \a+
çå¹é
项ï¼p2
æ¯ \b+
çå¹é
项ãå¦æè¯¥ç»æ¯åæ¯çä¸é¨åï¼ä¾å¦ "abc".replace(/(a)|(b)/, Replacer)
ï¼ï¼åä¸å¹é
çæ¿ä»£é¡¹å°ä¸º undefined
ã
offset
åå§å符串ä¸å¹é
åå符串çåç§»éãä¾å¦ï¼å¦ææ´ä¸ªåç¬¦ä¸²æ¯ 'abcd'
ï¼èå¹é
çååç¬¦ä¸²æ¯ 'bc'
ï¼é£ä¹è¿ä¸ªåæ°å°æ¯ 1
ã
string
æ£å¨æ£æ¥çåå§å符串ã
groups
ä¸ä¸ªæè·ç»å½åç»æç对象ï¼å¼æ¯å¹é
çé¨åï¼å¦ææ²¡æå¹é
ï¼å为 undefined
ï¼ãä»
å¨ pattern
å
å«è³å°ä¸ä¸ªå½åæè·ç»æ¶æåå¨ã
åæ°çç¡®åæ°éåå³äºç¬¬ä¸ä¸ªåæ°æ¯å¦ä¸º RegExp
对象ï¼ä»¥å宿å¤å°ä¸ªæè·ç»ã
以ä¸ç¤ºä¾å°è®¾ç½® newString
为 'abc - 12345 - #$*%'
ï¼
function replacer(match, p1, p2, p3, offset, string) {
// p1 æ¯éæ°åï¼p2 æ¯æ°åï¼ä¸ p3 é忝æ°å
return [p1, p2, p3].join(" - ");
}
const newString = "abc12345#$*%".replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString); // abc - 12345 - #$*%
å¦æç¬¬ä¸ä¸ªåæ°ä¸çæ£åè¡¨è¾¾å¼æ¯å ¨å±çï¼é£ä¹ä¸ºäºæ¿æ¢æ¯ä¸ªå®å ¨å¹é çå符串ï¼è¯¥å½æ°å°è¢«å¤æ¬¡è°ç¨ã
ç¤ºä¾ å¨ replace() ä¸å®ä¹æ£å表达å¼å¨ä»¥ä¸ç¤ºä¾ä¸ï¼æ£å表达å¼å¨ replace()
ä¸å®ä¹ï¼å¹¶å
æ¬å¿½ç¥å¤§å°åæ å¿ã
const str = "Twas the night before Xmas...";
const newstr = str.replace(/xmas/i, "Christmas");
console.log(newstr); // Twas the night before Christmas...
è¿å°æå° 'Twas the night before Christmas...'
ã
夿³¨ï¼ æå ³æ£å表达å¼çæ´å¤è§£éï¼è¯·åé æ£åè¡¨è¾¾å¼æåã
å¨ replace() ä¸ä½¿ç¨ global å ignoreCase æ å¿åªè½ä½¿ç¨æ£å表达å¼è¿è¡å
¨å±æ¿æ¢ãå¨ä»¥ä¸ç¤ºä¾ä¸ï¼æ£å表达å¼å
æ¬ global å ignoreCase æ å¿ï¼å
许 replace()
å°åç¬¦ä¸²ä¸æ¯ä¸ªåºç°ç 'apples'
æ¿æ¢ä¸º 'oranges'
ã
const re = /apples/gi;
const str = "Apples are round, and apples are juicy.";
const newstr = str.replace(re, "oranges");
console.log(newstr); // oranges are round, and oranges are juicy.
è¿å°æå° 'oranges are round, and oranges are juicy'
ã
以ä¸èæ¬äº¤æ¢å符串ä¸çåè¯ãå¯¹äºæ¿æ¢ææ¬ï¼èæ¬ä½¿ç¨æè·ç»ä»¥å $1
å $2
æ¿æ¢æ¨¡å¼ã
const re = /(\w+)\s(\w+)/;
const str = "Maria Cruz";
const newstr = str.replace(re, "$2, $1");
console.log(newstr); // Cruz, Maria
è¿å°æå° 'Cruz, Maria'
ã
å¨è¿ä¸ªä¾åä¸ï¼åç¬¦ä¸²ä¸ææåºç°ç大å忝é½è¢«è½¬æ¢ä¸ºå°åï¼å¹¶ä¸å¨å¹é ä½ç½®åæå ¥ä¸ä¸ªè¿å符ãéè¦çæ¯ï¼å¨å°å¹é 项ä½ä¸ºæ¿æ¢è¿åä¹åï¼éè¦å¯¹å¹é 项è¿è¡é¢å¤çæä½ã
å¨è¿ååï¼æ¿æ¢å½æ°æ¥åå¹é ççæ®µä½ä¸ºåæ°ï¼å¹¶ä½¿ç¨å®æ¥è½¬æ¢å¤§å°åå¹¶æ¼æ¥è¿å符ã
function styleHyphenFormat(propertyName) {
function upperToHyphenLower(match, offset, string) {
return (offset > 0 ? "-" : "") + match.toLowerCase();
}
return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}
è¿è¡ styleHyphenFormat('borderTop')
ï¼å°è¿å 'border-top'
ã
ç±äºæä»¬å¸æå¨æç»æ¿æ¢ä¹åè¿ä¸æ¥è½¬åå¹é
ç»æï¼æä»¥æä»¬å¿
须使ç¨ä¸ä¸ªå½æ°ãè¿ä¼å¼ºå¶å¨ä½¿ç¨ toLowerCase()
æ¹æ³ä¹å对å¹é
è¿è¡æ±å¼ã妿æä»¬å°è¯å¨æ²¡æå½æ°çæ
åµä¸ä½¿ç¨å¹é
æ¥å®æè¿ä¸ªæä½ï¼toLowerCase()
æ¹æ³å°æ²¡æææã
// ä¸ä¼äº§çä½ç¨
const newString = propertyName.replace(/[A-Z]/g, "-" + "$&".toLowerCase());
è¿æ¯å 为 '$&'.toLowerCase()
ä¼é¦å
ä½ä¸ºä¸ä¸ªå符串åé¢éè¿è¡æ±å¼ï¼ç»æä»ç¶æ¯ '$&'
ï¼ï¼ç¶ååå°å
¶ä½ä¸ºå¹é
模å¼ä½¿ç¨ã
ä¸é¢çä¾åæ¼ç¤ºå¦ä½å°åæ°æ¸©åº¦è½¬æ¢ä¸ºç¸åºçææ°æ¸©åº¦ãåæ°æ¸©åº¦ç¨ä¸ä¸ªæ°åå ä¸ä¸ª "F"
æ¥è¡¨ç¤ºï¼è¿ä¸ªå½æ°å°è¿åä¸ä¸ªæ°åå "C"
æ¥è¡¨ç¤ºçææ°æ¸©åº¦ãä¾å¦ï¼å¦æè¾å
¥æ¯ "212F"
ï¼è¿ä¸ªå½æ°å°è¿å "100C"
ã妿è¾å
¥çæ°åæ¯ "0F"
ï¼è¿ä¸ªæ¹æ³å°è¿å "-17.77777777777778C"
ã
æ£åè¡¨è¾¾å¼ test
ç¨äºæ£æ¥ä»¥ F
ç»å°¾ç任使°åãåæ°åº¦çæ°å¼éè¿å½æ°ç第äºä¸ªåæ° p1
ä¼ å
¥å½æ°ãè¯¥å½æ°æ ¹æ®ä¼ éç» f2c()
彿°çå符串ä¸çåæ°åº¦æ°å¼è®¾ç½®ææ°åº¦æ°å¼ï¼ç¶å f2c()
彿°è¿åææ°åº¦æ°å¼ãè¯¥å½æ°å®ç°äºç±»ä¼¼ Perl ç s///e
æ å¿çåè½ã
function f2c(x) {
function convert(str, p1, offset, s) {
return `${((p1 - 32) * 5) / 9}C`;
}
const s = String(x);
const test = /(-?\d+(?:\.\d*)?)F\b/g;
return s.replace(test, convert);
}
å建ä¸ä¸ªéç¨çæ¿æ¢å¨
å设æä»¬æ³å建ä¸ä¸ªæ¿æ¢å¨ï¼å°åç§»æ°æ®éå å°æ¯ä¸ªå¹é
çå符串ä¸ãå ä¸ºæ¿æ¢å½æ°å·²ç»æ¥æ¶å° offset
åæ°ï¼å¦ææ£åè¡¨è¾¾å¼æ¯éæå·²ç¥çï¼é£ä¹è¿å°åå¾å¾ç®åã
"abcd".replace(/(bc)/, (match, p1, offset) => `${match} (${offset}) `);
// "abc (1) d"
ç¶èï¼å¦ææä»¬å¸æè¿ä¸ªæ¿æ¢å¨è½å¤éç¨äºä»»ä½æ£åè¡¨è¾¾å¼æ¨¡å¼ï¼é£ä¹å®å°å¾é¾æ³åãæ¿æ¢å¨æ¯å¯ååæ°çï¼å®æ¥æ¶çåæ°æ°éåå³äºåå¨çæè·ç»æ°éãæä»¬å¯ä»¥ä½¿ç¨å©ä½åæ°åæ°ï¼ä½å®ä¹ä¼å° offset
ãstring
çæ¶éå°æ°ç»ä¸ãæ ¹æ®æ£å表达å¼çç¹æ§ï¼groups
å¯è½ä¼è¢«ä¼ éæè
ä¸ä¼è¢«ä¼ éï¼è¿ä¹ä½¿å¾å¾é¾æ³åå°ç¥éåªä¸ªåæ°å¯¹åºäº offset
ã
function addOffset(match, ...args) {
const offset = args.at(-2);
return `${match} (${offset}) `;
}
console.log("abcd".replace(/(bc)/, addOffset)); // "abc (1) d"
console.log("abcd".replace(/(?<group>bc)/, addOffset)); // "abc (abcd) d"
å¨ä¸é¢ç addOffset
示ä¾ä¸ï¼å½æ£å表达å¼å
å«ä¸ä¸ªå½åç»æ¶ï¼å®æ æ³æ£å¸¸å·¥ä½ï¼å 为å¨è¿ç§æ
åµä¸ args.at(-2)
æ¯ string
è䏿¯ offset
ã
ç¸åï¼ä½ éè¦æ ¹æ®ç±»åæåæåå ä¸ªåæ°ï¼å 为 groups
æ¯ä¸ä¸ªå¯¹è±¡ï¼è string
æ¯ä¸ä¸ªå符串ã
function addOffset(match, ...args) {
const hasNamedGroups = typeof args.at(-1) === "object";
const offset = hasNamedGroups ? args.at(-3) : args.at(-2);
return `${match} (${offset}) `;
}
console.log("abcd".replace(/(bc)/, addOffset)); // "abc (1) d"
console.log("abcd".replace(/(?<group>bc)/, addOffset)); // "abc (1) d"
è§è æµè§å¨å
¼å®¹æ§ åè§
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4