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

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");

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.

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.

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.

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.

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.

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.

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.

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

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

Tabela 1. Compatibilidade do método x browsers.

• string.split()
• string.length()