JavaScript indexOf(): Encontrando a posi��o de um caractere ou string

JavaScript indexOf()

Nesta documentaç�o de JavaScript veremos como o m�todo indexOf() do objeto String pode ser utilizado para recuperar a posiç�o inicial de um elemento, dentro de uma sequ�ncia de caracteres. Caso esse elemento n�o exista, � retornado o valor -1.

Apresentaremos aqui como utilizar o m�todo indexOf().

JavaScript indexOf(): Na pr�tica

var stringExemplo = "Aprendendo JavaScript na DevMedia!";
   
// Valor retornado: 25
stringExemplo.indexOf("DevMedia");
   
// Valor retornado: 6
stringExemplo.indexOf("en", 4);
   
// Valor retornado: 11
stringExemplo.indexOf("Java", -8);
   
// Valor retornado: -1
stringExemplo.indexOf(".NET");
   
// Valor retornado: 12
stringExemplo.indexOf("a");

Como funciona o indexOf()?

Uma string pode ser vista como um array de caracteres, indexado da esquerda para a direita, onde a primeira posiç�o � 0 e �ltima o comprimento da string menos um. Considerando o seguinte c�digo:

var stringExemplo = "Aprendendo JavaScript na DevMedia!";
var posicao = stringExemplo.indexOf("JavaScript");

O valor atribu�do � vari�vel posicao ser� o n�mero 11, conforme a Figura 1.

Figura 1. Funcionamento do m�todo indexOf()

Sintaxe

string.indexOf(elemento, [posicaoInicial])

Par�metros

elemento � o valor a ser encontrado dentro da string;

posicaoInicial [opcional] � o n�mero que determina a posiç�o inicial a partir da qual o elemento deve ser buscado. Por padr�o � 0. Caso seja informado um valor negativo, a busca começa da posiç�o 0. Caso seja informado um valor maior que o da string em an�lise, a busca começa a partir da posiç�o referente ao tamanho dessa string (string.length).

Valor de retorno

� retornada a posiç�o da primeira ocorr�ncia do elemento na string. Caso o elemento n�o seja encontrado, � retornada a posiç�o -1.

Exemplos de indexOf()

Exemplo 1

No exemplo a seguir buscamos por parte de uma palavra:

var stringExemplo = "Aprendendo JavaScript na DevMedia!";
var resultado = stringExemplo.indexOf("Script");

O valor retornado � 15.

Run!

Exemplo 2

No exemplo a seguir utilizamos o par�metro posicaoInicial. A busca pela substring �end� começar� na posiç�o 4, isto �, na primeira letra �n� de stringExemplo:

var stringExemplo = "Aprendendo JavaScript na DevMedia!";
var resultado = stringExemplo.indexOf("end", 4);

O valor retornado � 6.

Run!

Exemplo 3

No exemplo a seguir informamos um valor negativo para o par�metro posicaoInicial. Isso far� com que a contagem de caracteres se inicie em 0.

var stringExemplo = "Aprendendo JavaScript na DevMedia!";
var resultado = stringExemplo.indexOf("end", -7);

O valor retornado � 3.

Run!

Exemplo 4

No exemplo a seguir demonstramos que indexOf() � case sensitive. Sendo assim, a palavra �javascript� n�o ser� encontrada, pois devido aos caracteres em min�scula, ela � diferente de �JavaScript�.

var stringExemplo = "Aprendendo JavaScript na DevMedia!";
var resultado = stringExemplo.indexOf("javascript");

O valor retornado � -1.

Run!

Exemplo 5

Por ser indexOf() um m�todo do objeto String,podemos cham�-lo a partir de qualquer inst�ncia desse objeto, inclusive no caso abaixo:

var posicao = "Aprendendo JavaScript na DevMedia!".indexOf("end", 4)

O valor retornado � 6.

Run!

Exemplo 6

Neste exemplo desejamos saber se o valor de cep atende a um certo formato. Para isso verificamos se na posiç�o 2 temos o caractere �.� e se na posiç�o 6 temos o caractere �-�.

var cep = "22.000-000";
var cepFormatado = false;
   
if(cep.indexOf(".") == 2 && cep.indexOf("-") == 6){
    cepFormatado = true;
}

Ao final desse script o valor de cepFormatado ser� true.

Run!

Exemplo 7

indexOf() � geralmente utilizada em conjunto com algum outro m�todo da classe String para, a partir dela, obtermos um novo valor.

Neste exemplo desejamos deixar apenas a palavra DevMedia em negrito, adicionando a tag <b> ao redor desta palavra:

var stringExemplo = "Aprendendo JavaScript na DevMedia!";
var posicaoInicial = stringExemplo.indexOf("DevMedia");
var posicaoFinal = posicaoInicial + "DevMedia".length;
var htmlExemplo = "";

for(caractere in stringExemplo) {
    htmlExemplo += stringExemplo.charAt(caractere);
   
    if(caractere == posicaoInicial - 1) {
        htmlExemplo += "<b>";
    }
   
    if(caractere == posicaoFinal - 1) {
        htmlExemplo += "</b>";
    }
}

Ao final da execuç�o deste script o valor de htmlExemplo ser�: "Aprendendo JavaScript na <b>DevMedia</b>!".

Run!

Compatibilidade entre navegadores

indexOf() � suportado por todos os browsers apresentados na Tabela 1.

indexOf()	Chrome	Firefox	IE	Edge	Safari	Opera
indexOf()	Sim	Sim	Sim	Sim	Sim	Sim

Tabela 1. Compatibilidade do m�todo x browsers.

JavaScript indexOf(): encontrando a posi��o de um caractere ou string

Nesta documentação de JavaScript veremos como o método indexOf() pode ser utilizado para recuperar a posição inicial de um elemento, dentro de uma sequência de caracteres.