Vyhledávání řetězců JavaScript

Obsah

Metody vyhledávání řetězců


String indexOf()
String lastIndexOf()
String search()
String match()
String matchAll()
String includes()
String startsWith()
String endsWith()

JavaScript řetězec indexOf()

Metoda indexOf() vrací index (pozice) první výskyt řetězce v řetězci:

Příklad

let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>

<p>The indexOf() method returns the position of the first occurrence of a string in a string.</p>
<p>The position of the first occurrence of "locate" is:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

Poznámka

JavaScript počítá pozice od nuly.

0 je první pozice v a řetězec, 1 je druhý, 2 je třetí, ...

JavaScriptový řetězec lastIndexOf()

Metoda lastIndexOf() vrací index posledního výskyt zadaného textu v řetězci:

Příklad

let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The lastIndexOf() Method</h2>

<p>The position of the last occurrence of "locate" is:</p>

<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");
document.getElementById("demo").innerHTML = index;
</script>

</body>
</html>

Jak indexOf(), tak lastIndexOf() vrátí hodnotu -1 pokud text není nalezen:

Příklad

let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("John");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>

<p>Both indexOf() and lastIndexOf() return -1 if the text is not found:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("John");
document.getElementById("demo").innerHTML = index;
</script>

</body>
</html>

Obě metody přijímají druhý parametr jako výchozí pozici pro Vyhledávání:

Příklad

let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate", 15);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>

<p>The indexOf() method accepts a second parameter as the starting position for the search:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate",15);
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

Metody lastIndexOf() vyhledává zpětně (od konce do začátku), což znamená: pokud je druhý parametr 15, vyhledávání začíná na pozici 15 a hledá začátek řetězce.

Příklad

let text = "Please locate where 'locate' occurs!";
text.lastIndexOf("locate", 15);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The lastIndexOf() Method</h2>

<p>The lastIndexOf() method accepts a second parameter as the starting position for the search.</p>
<p>Remember that the lastIndexOf() method searches backwards, so position 15 means start the search at position 15, and search to the beginning.</p>

<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate", 15);
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

JavaScript String search()

Metoda search() hledá v řetězci řetězec (nebo regulární výraz) a vrátí pozici zápasu:

Příklady

let text = "Please locate where 'locate' occurs!";
text.search("locate");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The search() Method</h2>

<p>The search() method returns the position of the first occurrence of a string in a string.</p>
<p>The position of the first occurrence of "locate" is:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.search("locate");
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

let text = "Please locate where 'locate' occurs!";
text.search(/locate/);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The search() Method</h2>

<p>The search() method returns the position of the first occurrence of a string in a string.</p>
<p>Return the position of the first occurrence of a regular expression:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.search(/locate/);
document.getElementById("demo").innerHTML = index;
</script>

</body>
</html>

Všiml sis?

Tyto dvě metody, indexOf() a search(), jsou rovné?

Přijímají stejné argumenty (parametry) a vracejí stejnou hodnotu?

Tyto dvě metody NEJSOU stejné. Toto jsou rozdíly:

Metoda search() nemůže převzít druhý argument počáteční pozice.
Metodu indexOf() nelze použít výkonné vyhledávací hodnoty (regulární výrazy).

Dozvíte se více o regulární výrazy v další kapitole.

JavaScript String match()

Metoda match() vrací pole obsahující výsledky shody řetězec proti řetězci (nebo regulární výraz).

Příklady

Proveďte vyhledávání "ain":

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match("ain");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain";
const myArr = text.match("ain");
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

</body>
</html>

Proveďte vyhledávání "ain":

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match(/ain/);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
const myArr = text.match(/ain/);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;

</script>

</body>
</html>

Proveďte globální vyhledávání „ain“:

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match(/ain/g);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a global search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
const myArr = text.match(/ain/g);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

</body>
</html>

Proveďte globální vyhledávání „ain“ bez rozlišení velkých a malých písmen:

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match(/ain/gi);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a global, case-insensitive search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
const myArr = text.match(/ain/gi);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

</body>
</html>

Poznámka

Pokud regulární výraz neobsahuje modifikátor g (globální vyhledávání), match() vrátí pouze první shodu v řetězci.

Přečtěte si více o regulárních výrazech v kapitole JS RegExp.

JavaScript řetězec matchAll()

Metoda matchAll() vrací iterátor obsahující výsledky shody řetězec proti řetězci (nebo regulární výraz).

Příklad

const iterator = text.matchAll("Cats");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Pokud je parametrem regulární výraz, musí být nastaven globální příznak (g), jinak je vyvolána chyba TypeError.

Příklad

const iterator = text.matchAll(/Cats/g);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Pokud chcete vyhledávat bez ohledu na velikost písmen, musí být nastaven příznak necitlivosti (i):

Příklad

const iterator = text.matchAll(/Cats/gi);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

Poznámky

matchAll() je funkce ES2020.

matchAll() v aplikaci Internet Explorer nefunguje.

Řetězec JavaScript zahrnuje()

Pokud řetězec obsahuje zadanou hodnotu, metoda includes() vrátí hodnotu true.

Jinak vrátí false.

Příklady

Zkontrolujte, zda řetězec obsahuje „svět“:

let text = "Hello world, welcome to the universe.";
text.includes("world");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>

<p>Check if a string includes "world":</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>

</body>
</html>

Zkontrolujte, zda řetězec obsahuje „svět“. Začněte na pozici 12:

let text = "Hello world, welcome to the universe.";
text.includes("world", 12);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>

<p>Check if a string includes "world" starting from position 12:</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world", 12);
</script>

</body>
</html>

Poznámky

includes() rozlišuje velká a malá písmena.

includes() je funkce ES6.

includes() není v Internet Exploreru podporována.

Řetězec JavaScript začínáS()

Metoda startsWith() vrací true pokud řetězec začíná zadanou hodnotou.

Jinak vrátí false:

Příklady

Vrací true:

let text = "Hello world, welcome to the universe.";
text.startsWith("Hello");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>
<p>Check if a string starts with "Hello":</p>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("Hello");
</script>

</body>
</html>

Vrací false:

let text = "Hello world, welcome to the universe.";
text.startsWith("world")

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world");
</script>

</body>
</html>

Počáteční pozici pro vyhledávání lze určit:

Vrací false:

let text = "Hello world, welcome to the universe.";
text.startsWith("world", 5)

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world", 5);
</script>

</body>
</html>

Vrací true:

let text = "Hello world, welcome to the universe.";
text.startsWith("world", 6)

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world", 6);
</script>

</body>
</html>

Poznámky

startsWith() rozlišuje velká a malá písmena.

startsWith() je funkce ES6.

startsWith() není v Internet Exploreru podporována.

Řetězec JavaScript končíS()

Metoda endsWith() vrací hodnotu true pokud řetězec končí zadanou hodnotou.

Jinak vrátí false:

Příklady

Zkontrolujte, zda řetězec končí „Doe“:

let text = "John Doe";
text.endsWith("Doe");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check if a string ends with "Doe":</p>

<p id="demo"></p>

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "John Doe";
document.getElementById("demo").innerHTML = text.endsWith("Doe");
</script>

</body>
</html>

Zkontrolujte, zda prvních 11 znaků řetězce končí „world“:

let text = "Hello world, welcome to the universe.";
text.endsWith("world", 11);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check in the 11 first characters of a string ends with "world":</p>

<p id="demo"></p>

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.endsWith("world", 11);
</script>

</body>
</html>

Poznámky

endsWith() rozlišuje velká a malá písmena.

endsWith() je funkce ES6.

endsWith() není v Internet Exploreru podporována.

Kompletní odkaz na řetězec

Úplnou referenci String naleznete na naší stránce:

Kompletní reference JavaScriptového řetězce.

Odkaz obsahuje popisy a příklady všech vlastností a metod řetězců.