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.

M�todos semelhantes

Tecnologias:

Confira outros conte�dos:

O que s�o arrays e como utiliz�-los no...

Fundamentos b�sicos de JavaScript...

JavaScript setInterval: executando...

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Devmedia Em 2018

Coment�rios nesta publica��o Escrever um coment�rio sobre conte�do

�caro Cruz

N�vel 28

Eu estou com uma d�vida, no caso, se eu quero encontrar em uma string, letras de m-z, tem como eu usar o indexOf e o regex? ou uso outro m�todo?

há +1 ano

Ver coment�rio anterior

Romulo Sousa

N�vel 81

Fala Icaro.

Voc� pode usar uma fun��o para isso.

function KeyString(elm) 
 { 
 var pattern = /^[a-zA-Z0-9]*$/; 
 if( !elm.value.match(pattern)) 
 { 
 alert("require a-z and 0-9"); 
 elm.value=''; 
 } 
 }

há +1 ano

M�rcio Mendon�a

N�vel 28

for(caractere in stringExemplo) {
htmlExemplo += stringExemplo.charAt(caractere);

N�o entendi essa parte

há +1 ano

Rodolfo Gomes

DevMedia

Fala M�rcio, tudo bem?

Pode deixar que te ajudaremos ;)

Nesta linha

for(caractere in stringExemplo) {

� utilizada a estrutura de repeti��o for in que percorrer� a String 'stringExemplo' utilizando 'caractere' como �ndice desta varredura.

Como mencionado no texto sobre o comportamento do c�digo, ser� impresso no final da execu��o a palavra DevMedia em negrito, para isso precisaremos identificar os caracteres iniciais e finais.

htmlExemplo += stringExemplo.charAt(caractere);

Por isso no trecho de c�digo acima � realizada a atribui��o de cada caractere de 'stringExemplo' por meio do m�todo charAt, que consiste em retornar o caractere de uma determinada string conforme o �ndice recebido como par�metro, que neste exemplo foi o 'caractere'.

Ent�o neste trecho ser� atribu�do a 'htmlExemplo' a cada repeti��o os caracteres que correspondem a 'stringExemplo'.

Por isso na sequ�ncia as condicionais conseguem identificar corretamente o inicio e fim da palavra devmedia para assim inserir a tag 'b' para aplicar o negrito a palavra.

Ficou mais claro o entendimento do c�digo?

Qualquer d�vida compartilhe conosco

Grande abra�o!

há +1 ano

Caio Cesar

N�vel 15

function contem(matrix, indice){
this.matrix = [matrix]
this.indice = [indice]
console.log(matrix)
console.log(indice)
return this.matrix.indexOf(indice) !== -1

}

contem([1, 6, 7, 6],32)

console.log(contem())

Consegue me ajudar a entender o erro

há +1 ano

Ver coment�rios anteriores (3)

Lucas Lima

N�vel 19

Ol� Caio, tudo bem ?

O erro do seu c�digo se encontra em voc� ter uma fun��o de retorno e n�o estar retornando a nenhuma vari�vel em primeiro momento :

// Erro 
 contem([1, 6, 7, 6],32); 
 // Correto 
 var dados = contem([1, 6, 7, 6],32); 
 console.log(dados);

O segundo erro est� em voc� implementar uma console.log com a fun��o n�o preenchida.

 
 
 // Erro 
 
 console.log(contem()); 
 
 // Correto 
 
 console.log(contem([1, 6, 7, 6],32));

E por fim um outro detalhe que percebi � que dentro do atributo do objeto contem :

 
 
 // Voc� est� inserindo um matriz dentro de um array ou seja para acessa-l� � necess�rio usar de [0] e o indice dentro de um array tamb�m quando escreve assim. Ex. this.matriz= [matrix]; 
 //O correto seria atribuir de forma direta. Ex. this.matriz = matrix; 
 
 this.matriz[0].indexOf(indice); 
 
 this.matriz.indexOf(indice);

Por�m para a sua necessidade aconselho utilizar da fun��o includes como mostrarei no exemplo abaixo :

 
 
 function contem(matrix, indice){ 
 this.matrix = matrix; 
 this.indice = indice; 
 console.log(this.matrix) 
 console.log(indice) 
 return this.matrix.includes(indice); 
 
 } 
 
 var dados = contem([1, 6, 7, 6],4) 
 
 console.log(dados)

Caso tenha ficado alguma d�vida estamos a disposi��o !!!

há +1 ano

M�rio Pacheco

N�vel 3

Boa noite pessoal, estou lendo e tentando copiar o c�digo do artigo JavaScript indexOf() e est� gerando o seguinte erro quando eu entro com os valores e clico no bot�o verificar, lembrando que eu criei um arquivo.js para a minha fun��o que ser� chamada no c�digo do index.html:

Uncaught TypeError: Cannot read property 'value' of null exemplo.js:3
at localizarString (exemplo.js:3)
at HTMLButtonElement.onclick (index.html:22)

localizarString @ exemplo.js:3
onclick @ index.html:22

há +1 ano

Rodolfo Gomes

DevMedia

Fala Mario tudo bem?

Primeiramente obrigado pelo feedback ;)

Qual foi o c�digo de exemplo que utilizou?

Compartilha aqui conosco para que possamor te ajudar

Grande abra�o!

há +1 ano

Allef Santos

N�vel 16

Opa galera beleza? T� com uma duvida aqui, eu tenho um Array de objetos e tenho um fun��o que recebe um desses objetos como par�metro. Estou tentando receber o �ndice do objeto que recebo na fun��o para poder fazer um splice no Array original mas sempre recebo o valor -1. Vou tentar colocar mais ou menos o c�digo aqui.

//template Vue fazendo o For in no Array de objetos 
 <ul class="list-group mt-2" v-for="d in donor" :key="d.id"> 
 <li class="list-group-item">{{d.name}}</li> 
 <li class="list-group-item">{{d.email}}</li> 
 <li class="list-group-item">{{d.typeBlood}}</li> 
 <li class="list-group-item"> 
 <button class="btn btn-outline-danger btn-sm" @click="removeDonor(d)">Apagar</button> 
 </li> 
 </ul> 
 ---------------------------------------------------------------------- 
 //Quero achar o indice desse objeto dentro do Array para fazer um splice 
 removeDonor(donor) { 
 console.log(this.donor.indexOf(donor.name)); 
 //implementar o splice 
 } 
 },

há +1 ano

Romulo Sousa

N�vel 81

Fala Allef

Voce pode usar o FindIndex();

Um exemplo

var content = 
 { 
 'nome': 'teste', 
 'email': 'teste@teste', 
 'itens': [ 
 { 
 'nome': 'item 1', 
 'subItens': [ 
 { 'nome': 'subItem 1' }, 
 { 'nome': 'subItem 2' } 
 ] 
 }, 
 { 
 'nome': 'item 2', 
 'subItens': [ 
 { 'nome': 'subItem 5' }, 
 { 'nome': 'subItem 6' } 
 ] 
 }, 
 { 
 'nome': 'item 1', 
 'subItens': [] 
 } 
 ] 
 }; 
 
 console.log(content.itens[0].subItens[0]); 
 console.log(content.itens[0]); 
 for (var index = 0; index < content.itens[0].subItens.length; index++) { 
 console.log(content.itens[0].subItens[index].nome); 
 }

há +1 ano

Iwry Sousa

N�vel 6

Com fun��o regular � poss�vel "contornar" o case-sentive do indexof(), assim como foi mostrado no replace()?

há +1 ano

Ver coment�rio anterior

Marcio Souza

DevMedia

Oi IWRY.

N�o � poss�vel, os m�todos do Javascript que trabalham com express�o regular s�o:

Metodo : Descri��o

exec : Um m�todo RegExp que execute uma pesquisa por uma correspond�ncia em uma string. Retorna um array de informa��es.

test : Um m�todo RegExp que testa uma correspond�ncia em uma string. Retorna true ou false.

match : Um m�todo String que executa uma pesquisa por uma correspond�ncia em uma string. Retorna uma array de informa��es ou null caso n�o haja uma correspond�ncia.

search : Um m�todo String que testa uma correspond�ncia em uma string. Retorna o indice da correspond�ncia ou -1 se o teste falhar.

replace : Um m�todo String que executa uma pesquisa por uma correspond�ncia em uma string, e substitui a substring correspond�nte por uma substring de substitui��o.

split : Um m�todo String que usa uma express�o regular ou uma string fixa para quebrar uma string dentro de um array de substrings.

há +1 ano

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

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.