Nahraďte výskyty podřetězce v řetězci JavaScriptem

Ú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.