Pesquisa de string JavaScript

Índice

    Mostrar índice

Métodos de pesquisa de strings

    

  • String indexOf()
    • 

  • String lastIndexOf()
    • 

  • String search()
    • 

  • String match()
    • 

  • String matchAll()
    • 

  • String includes()
    • 

  • String startsWith()
    • 

  • String endsWith()
    •

String JavaScript indexOf()

O método indexOf() retorna o índice (posição) a primeira ocorrência de uma string em uma string:

Exemplo

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

Experimente você mesmo →

<!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>

Observação

JavaScript conta posições a partir de zero.

0 é a primeira posição em um string, 1 é o segundo, 2 é o terceiro, ...

String JavaScript lastIndexOf()

O método lastIndexOf() retorna o índice do último ocorrência de um texto especificado em uma string:

Exemplo

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

Experimente você mesmo →

<!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>

Ambos indexOf() e lastIndexOf() retornam -1 se o texto não for encontrado:

Exemplo

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

Experimente você mesmo →

<!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>

Ambos os métodos aceitam um segundo parâmetro como posição inicial para o procurar:

Exemplo

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

Experimente você mesmo →

<!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>

Os métodos lastIndexOf() pesquisam de trás para frente (do fim para o começo), significando: se o segundo parâmetro for 15, a pesquisa começa na posição 15 e pesquisa até o início da string.

Exemplo

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

Experimente você mesmo →

<!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>

Pesquisa de string JavaScript()

O método search() pesquisa uma string em uma string (ou uma expressão regular) e retorna a posição da partida:

Exemplos

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

Experimente você mesmo →

<!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/);

Experimente você mesmo →

<!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>

Você percebeu?

Os dois métodos, indexOf() e search(), são iguais?

Eles aceitam os mesmos argumentos (parâmetros) e retornam o mesmo valor?

Os dois métodos NÃO são iguais. Estas são as diferenças:

  • O método search() não pode receber um segundo argumento de posição inicial.

  • O método indexOf() não pode aceitar valores de pesquisa poderosos (expressões regulares).

Você aprenderá mais sobre expressões regulares em um capítulo posterior.

Correspondência de string JavaScript()

O método match() retorna um array contendo os resultados da correspondência uma string contra uma string (ou uma expressão regular).

Exemplos

Faça uma busca por "ain":

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

Experimente você mesmo →

<!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>

Faça uma busca por "ain":

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

Experimente você mesmo →

<!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>

Faça uma busca global por "ain":

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

Experimente você mesmo →

<!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>

Execute uma pesquisa global e sem distinção entre maiúsculas e minúsculas por "ain":

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

Experimente você mesmo →

<!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>

Observação

Se uma expressão regular não incluir o modificador g (pesquisa global), match() retornará apenas a primeira correspondência na string.

Leia mais sobre expressões regulares no capítulo JS RegExp.

String JavaScript matchAll()

O método matchAll() retorna um iterador contendo os resultados da correspondência uma string contra uma string (ou uma expressão regular).

Exemplo

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

Experimente você mesmo →

<!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>

Se o parâmetro for uma expressão regular, o sinalizador global (g) deverá ser definido, caso contrário um TypeError é lançado.

Exemplo

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

Experimente você mesmo →

<!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>

Se você deseja pesquisar sem distinção entre maiúsculas e minúsculas, o sinalizador insensível (i) deve ser definido:

Exemplo

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

Experimente você mesmo →

<!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>

Notas

matchAll() é um recurso do ES2020.

matchAll() não funciona no Internet Explorer.

String JavaScript inclui()

O método includes() retorna verdadeiro se uma string contém um valor especificado.

Caso contrário, retorna false.

Exemplos

Verifique se uma string inclui "world":

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

Experimente você mesmo →

<!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>

Verifique se uma string inclui "mundo". Comece na posição 12:

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

Experimente você mesmo →

<!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>

Notas

includes() diferencia maiúsculas de minúsculas.

includes() é um recurso do ES6.

includes() não é compatível com o Internet Explorer.

String JavaScript começa com()

O método startsWith() retorna true se uma string começar com um valor especificado.

Caso contrário, retorna false:

Exemplos

Retorna verdadeiro:

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

Experimente você mesmo →

<!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>

Retorna falso:

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

Experimente você mesmo →

<!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>

Uma posição inicial para a pesquisa pode ser especificada:

Retorna falso:

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

Experimente você mesmo →

<!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>

Retorna verdadeiro:

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

Experimente você mesmo →

<!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>

Notas

startsWith() diferencia maiúsculas de minúsculas.

startsWith() é um recurso do ES6.

startsWith() não é compatível com o Internet Explorer.

String JavaScript termina com()

O método endsWith() retorna true se uma string terminar com um valor especificado.

Caso contrário, retorna false:

Exemplos

Verifique se uma string termina com "Doe":

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

Experimente você mesmo →

<!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>

Verifique se os 11 primeiros caracteres de uma string terminam com “world”:

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

Experimente você mesmo →

<!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>

Notas

endsWith() diferencia maiúsculas de minúsculas.

endsWith() é um recurso do ES6.

endsWith() não é compatível com o Internet Explorer.

Referência completa de string

Para uma referência completa de String, acesse:

Referência completa de string JavaScript.

A referência contém descrições e exemplos de todas as propriedades e métodos de string.