{ substr JavaScript } Como Extrair Parte de uma String

Extrair parte de uma string (também conhecido como Substring) é uma das operações mais comuns em JavaScript.

E nesse artigo, você vai descobrir como realizar essa tarefa com a função substr().

Como usar o método substr em JavaScript?

O JavaScript fornece o método substr() para obter uma parte da string, dada uma posição inicial e um comprimento:

myStr.substr(startPosition [, length])

Portanto o método aceita 2 parâmetros: 

• startPosition:  indica o ponto inicial da substring (lembrando que o primeiro caracter começa em zero); 
• length: indica o número de caracteres extraídos da string a partir do inicio.

Então se você passar os 2 argumentos, vai obter um subconjunto da string que começa na posição inicial e continua até o número especificado no comprimento.

Por exemplo, para extrair os 3 primeiros caracteres de uma string, você pode:

• Definir startPosition como 0; 
• E length como 3.

const myStr = 'Warcontent';

let myNewStr = myStr.substr(0, 3);

console.log(myNewStr); // 'War'

Porém o 2º argumento é opcional. E caso ele seja omitido, você obtém a substring começando da posição informada até o final da string original.

Por exemplo, veja como extrair uma substring a partir do 4º caracter:

myNewStr = myStr.substr(3);

console.log(myNewStr); // 'content'

Até esse ponto, já vimos o básico do método substr()…

Mas caso você queira se aprofundar, continue lendo esse artigo até o final…

O poder do método substr()

Não adianta nada uma nova ferramenta em seu Arsenal de Programador, se não tiver ideia de como usar.

Por isso, vamos ver 2 exemplos práticos desse recurso incrível do JavaScript:

1) Extrair domínio de um e-mail

Para isso, vamos utilizar o substr() com indexOf() da seguinte maneira:

• Primeiro, o indexOf() retorna a posição do caracter @;
• Em seguida, o substr() retorna o domínio começando no índice de @ + 1 até o final da string.

let email = '[email protected]';

let domain = email.substr(email.indexOf('@') + 1);

console.log(domain); // warcontent.com

2) Selecionar apenas o texto entre tags HTML

Agora, vamos fazer uso da propriedade string.length:

let exemploHTML = '<b>Texto em destaque</b>';

let resultado = exemploHTML.substr(3, exemploHTML.length - 7); 

// Resultado: 'Texto em destaque'

// Porque - 7 ?
// 3 de '<b>' + 4 de '</b>' = 7

Detalhes importantes do método substr()

Infelizmente, o desenvolvimento web não é apenas flores, há alguns detalhes importantes que você precisa ter em mente.

Primeiro, se o valor de length for zero ou negativo, então o método substr() retorna uma string vazia:

const myStr = 'Warcontent';

let myNewStr = myStr.substr(4, -1);

console.log(myNewStr); // ''

Segundo, caso o startPosition for negativo, ele medirá a posição a partir do final da string. 

Por exemplo, para pegar os 3 últimos caracteres da string, podemos fazer da seguinte maneira:

myNewStr = myStr.substr(-3);

console.log(myNewStr); // 'ent'

Mas cuidado! Se o valor negativo for maior que o tamanho da string, então startPosition será considerado como zero (0):

myNewStr = myStr.substr(-1000, 3);

console.log(myNewStr); // 'War'

Terceiro, quando alguma parâmetro for NaN, o substr() trata como se fosse zero (0):

myNewStr = myStr.substr('Não é um número', 3);

console.log(myNewStr); // 'War'

E por último, se length for undefined, o substr() extrai os caracteres até o final da string:

myNewStr = myStr.substr(3, undefined);

// Considera como substr(3)

console.log(myNewStr); // 'content'

Um universo de possibilidades! A diferença entre substring, slice e substr em JavaScript

A manipulação de strings é comum no desenvolvimento de qualquer aplicação… 

Felizmente, o JavaScript fornece vários métodos para analisar e extrair strings, como por exemplo: subtring, slice e substr.

Para conhecer a diferença entre esses 3 métodos, e saber qual deles usar, veja esse artigo explicando.

E se você gostou desse artigo, ou ficou com alguma dúvida, deixe seu comentário abaixo: