Artigos JavaScript JavaScript substring(): selecionando parte de uma string

JavaScript substring()

Nesta documentação de JavaScript veremos como utilizar o método substring() para extrair uma sequência de caracteres de uma string.

Apresentaremos aqui como utilizar o método substring().

JavaScript substring(): Na prática

  // Valor retornado: "Script é na DevMedia!"
  stringExemplo = "JavaScript é na DevMedia!";
  resultado = stringExemplo.substring(4);
   
  // Valor retornado: "Aprenda a utilizar"
  stringExemplo = "substring(): Aprenda a utilizar na DevMedia!";
  resultado = stringExemplo.substring(13, 31);
   
  // Valor retornado: "subs"
  stringExemplo = "substring(): Aprenda a utilizar na DevMedia!";
  resultado = stringExemplo.substring(4, -5);
   
  // Valor retornado: "subs"
  stringExemplo = "substring(): Aprenda a utilizar na DevMedia!";
  resultado = stringExemplo.substring(4, 0);
   
  // Valor retornado: "Texto em destaque"
  htmlExemplo = "<b>Texto em destaque</b>";
  resultado = htmlExemplo.substring(3, htmlExemplo.length - 4);
   
  // Valor retornado: "devmedia.com.br"
  emailExemplo = "exemplo@devmedia.com.br";
  resultado = emailExemplo.substring(emailExemplo.indexOf("@") + 1);

Como funciona o substring()?

O método substring() retorna o trecho de uma string de acordo com os números informados por parâmetro.

Considerando o seguinte código:


  var stringExemplo = "JavaScript é na DevMedia";
  var resultado = stringExemplo.substring(0, 10);

O valor atribuído à variável resultado será: “JavaScript”, conforme a Figura 1.

Execução do método substring()
Figura 1. Funcionamento do método substring()

Sintaxe

string.substring(posicaoInicial [, posicaoFinal])
Parâmetros

posicaoInicial é um número inteiro que define a posição a partir da qual o texto deve ser selecionado. Se informado um número negativo, passa-se a considerar o valor 0 (primeira posição da string).

posicaoFinal é um número inteiro que define a posição final da substring a ser selecionada. Esse parâmetro é opcional. Se informado um número negativo, passa-se a considerar o valor 0 (primeira posição da string). Se o valor desse parâmetro for menor que o valor do primeiro parâmetro, automaticamente é feita uma troca entre eles.

Caso seja especificado um valor maior que o tamanho da string (string.length), o método assumirá a posição string.length.

Valor de retorno

É retornada a nova string contendo apenas o trecho selecionado.

Exemplos de substring()

Exemplo 1

No exemplo a seguir selecionamos o trecho da string a partir da posição informada por parâmetro.


  var stringExemplo = "JavaScript é na DevMedia";
  var resultado = stringExemplo.substring(16);

O valor atribuído a resultado é: “DevMedia”. Como a palavra DevMedia está no final da string, não é necessário informar o segundo parâmetro.

Run!
Exemplo 2

No exemplo a seguir selecionamos um termo da string que se encontra no meio dela.


  var stringExemplo = "JavaScript é na DevMedia";
  var resultado = stringExemplo.substring(4, 10);

O valor atribuído a resultado é: “Script”.

Run!
Exemplo 3

No exemplo a seguir passamos um valor negativo no segundo parâmetro.


  var stringExemplo = "JavaScript é na DevMedia";
  var resultado = stringExemplo.substring(10, -3);

O valor atribuído a resultado é: “JavaScript”. O valor negativo é considerado como 0. Sendo 0 menor que 10, ele passa a ser considerado a posição inicial. Esta declaração é semelhante a: stringExemplo.substring(0, 10).

Run!
Exemplo 4

No exemplo a seguir passamos valores negativo para os dois parâmetros.


  var stringExemplo = "JavaScript é na DevMedia";
  var resultado = stringExemplo.substring(-8, 0);

O valor atribuído a resultado é: “”.

Run!
Exemplo 5

No exemplo a seguir passamos valores negativo para os dois parâmetros.


  var stringExemplo = "JavaScript é na DevMedia";
  var resultado = stringExemplo.substring(-9, 24);

O valor atribuído a resultado é: “JavaScript é na DevMedia”.

Run!
Exemplo 6

No exemplo a seguir demonstramos como selecionar apenas o texto entre as tags HTML que destacam o texto em negrito. Para isso também utilizamos a propriedade length.


  var htmlExemplo = "<b>Texto em destaque</b>";
  var resultado = htmlExemplo.substring(3, htmlExemplo.length - 4);

O valor atribuído a resultado é: “Texto em destaque”.

Run!

Compatibilidade entre navegadores

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

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

Tabela 1. Compatibilidade do método x browsers.