Úvod
Nahrazení všech nebo n výskyt podřetězce v daném řetězci je poměrně častým problémem manipulace s řetězci a zpracování textu obecně. JavaScript nabízí několik způsobů, jak toho dosáhnout poměrně snadno.
V tomto tutoriálu probereme několik příkladů, jak nahradit výskyty podřetězce v řetězci pomocí JavaScriptu.
Budeme pracovat s touto větou:
The grey-haired husky has one blue and one brown eye.
Budeme chtít nahradit slovo "blue"
s "hazel"
.
replace()
Nejjednodušší způsob, jak toho dosáhnout, je použít vestavěný replace()
funkce. Jako první argument přijímá regulární výraz a jako druhý argument slovo (slova), kterými nahrazujeme staré. Alternativně přijímá řetězec jako první argument.
Protože jsou řetězce v JavaScriptu neměnné, vrací tato operace nový řetězec. Pokud tedy chceme, aby byly změny trvalé, budeme muset při návratu přiřadit výsledek novému řetězci.
Podívejme se, jak můžeme použít funkci:
const regex = /blue/;
let originalStr = 'The grey-haired husky has one blue and one brown eye.';
let newStr = originalStr.replace(regex, 'hazel');
console.log(originalStr);
console.log(newStr);
Zde jsme místo vytvoření instance RegExp
použili literál regulárního výrazu instance. Výsledkem je:
The grey-haired husky has one blue and one brown eye.
The grey-haired husky has one hazel and one brown eye.
Alternativně bychom mohli definovat regulární výraz jako:
let regex = new RegExp('blue');
Výsledek by byl stejný. Rozdíl mezi literálem regulárního výrazu a RegExp
objekt spočívá v tom, že literály jsou kompilovány před spuštěním, zatímco objekt je kompilován za běhu.
První z nich je efektivnější, pokud regulární výraz zůstává konstantní, zatímco druhý se obvykle používá, pokud může být regulární výraz dynamický, jako je výraz definovaný uživatelem.
Chcete-li provést výměnu bez ohledu na velikost písmen, můžete předat i
příznak k regulárnímu výrazu:
const regex = /blue/i;
let originalStr = 'The grey-haired husky has one Blue and one brown eye.';
let newStr = originalStr.replace(regex, 'hazel');
console.log(originalStr);
console.log(newStr);
Nyní to má za následek:
The grey-haired husky has one Blue and one brown eye.
The grey-haired husky has one hazel and one brown eye.
Bez i
příznak, Blue
by neodpovídalo /blue/
regulární výraz.
Nakonec můžete místo regulárního výrazu použít řetězec:
let originalStr = 'The grey-haired husky has one blue and one brown eye.';
let newStr = originalStr.replace('blue', 'hazel');
console.log(originalStr);
console.log(newStr);
Zdarma e-kniha:Git Essentials
Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!
To má také za následek:
The grey-haired husky has one blue and one brown eye.
The grey-haired husky has one hazel and one brown eye.
Poznámka: Tento přístup funguje pouze pro první výskyt vyhledávacího řetězce. Chcete-li nahradit vše výskytů, můžete použít replaceAll()
funkce.
Pokud aktualizujeme řetězec:
let originalStr = 'The grey-haired husky a blue left eye and a blue right eye.';
let newStr = originalStr.replace('blue', 'hazel');
Výsledek by byl:
The grey-haired husky has a blue left eye and a blue right eye.
The grey-haired husky has a hazel left eye and a blue right eye.
Všimněte si, jak je nahrazen pouze první výskyt „modré“, ale nikoli druhý.
Všimněte si, že vlastně můžeme nahraďte všechny výskyty řetězce při použití regulárního výrazu a .replace()
. Abychom toho dosáhli, budeme chtít použít g
regex flag, což znamená „globální“. To odpovídá všem instancím v řetězci. Například:
const regex = /blue/g;
let originalStr = 'The grey-haired husky a blue left eye and a blue right eye.';
let newStr = originalStr.replace(regex, 'hazel');
console.log(originalStr);
console.log(newStr);
The grey-haired husky has a blue left eye and a blue right eye.
The grey-haired husky has a hazel left eye and a hazel right eye.
replaceAll()
Od srpna 2020, jak je definováno ve specifikaci ECMAScript 2021, můžeme používat replaceAll()
funkce, která nahradí všechny výskyty řetězce.
Přijímá řetězec, který hledáme, a řetězec, kterým bychom jej chtěli nahradit:
let originalStr = 'The grey-haired husky has a blue left eye and a blue right eye.';
let newStr = originalStr.replaceAll('blue', 'hazel');
console.log(originalStr);
console.log(newStr);
Výsledkem je:
The grey-haired husky has a blue left eye and a blue right eye.
The grey-haired husky has a hazel left eye and a hazel right eye.
Nyní vše instance hledaného slova byly nahrazeny.
split() a join()
Pokud replaceAll()
není ve vašem běhovém prostředí JavaScript podporováno, můžete použít starý důvěryhodný split()
a join()
přístup:
let originalStr = 'The grey-haired husky has a blue left eye and a blue right eye.';
let newStr = originalStr.split('blue').join('hazel');
console.log(originalStr);
console.log(newStr);
split()
funkce rozdělí řetězec na pole podřetězců na daném řetězci - 'blue'
. Po rozdělení máme pole:
["The grey-haired husky has a ", " left eye and a ", " right eye."]
Potom, když se použijete join()
pomocí řetězce jej spojíme zpět do původní věty, přičemž řetězec předaný funkci se vloží do zalomení.
Nyní nám zbývají všechny výskyty původního řetězce nahrazeného novým:
The grey-haired husky has a blue left eye and a blue right eye.
The grey-haired husky has a hazel left eye and a hazel right eye.
Poznámka :I když tento přístup funguje, nedoporučuje se jej používat, pokud je k dispozici jedna z jiných dříve vysvětlených metod. Důvodem je to, že účel tohoto přístupu není na první pohled tak zřejmý, a proto je kód méně čitelný.
Závěr
V tomto článku jsme prošli několika příklady, jak můžete nahradit výskyty podřetězce v řetězci pomocí JavaScriptu.