Métodos de string JavaScript

Índice

    Mostrar índice
String length
String slice()
String substring()
String substr()
String replace()
String replaceAll()
String toUpperCase()
String toLowerCase()
String concat()
String trim()
String trimStart()
String trimEnd()
String padStart()
String padEnd()
String charAt()
String charCodeAt()
String split()

Observação

Os métodos de pesquisa de string serão abordados no próximo capítulo.

Comprimento da string JavaScript

A propriedade length retorna o comprimento de uma string:

Exemplo

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The length Property</h2>

<p>The length of the string is:</p>
<p id="demo"></p>

<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>

</body>
</html>

Extraindo partes de string

Existem 3 métodos para extrair uma parte de uma string:

    
  
  • slice(start, end)
    • 
  
  • substring(start, end)
    • 
  
  • substr(start, length)
    •

Fatia de string JavaScript()

slice() extrai uma parte de uma string e retorna o parte extraída em uma nova string.

O método usa 2 parâmetros: posição inicial e posição final (fim não incluído).

Exemplo

Corte uma parte de uma corda da posição 7 à posição 13:

let text = "Apple, Banana, Kiwi";
let part = text.slice(7, 13);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>The sliced (extracted) part of the string is:</p>
<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7,13);
document.getElementById("demo").innerHTML = part; 
</script>

</body>
</html>

Observação

JavaScript conta posições a partir de zero.

A primeira posição é 0.

A segunda posição é 1.

Exemplos

Se você omitir o segundo parâmetro, o método cortará o restante da string:

let text = "Apple, Banana, Kiwi";
let part = text.slice(7);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>Extract a part of a string from position 7:</p>
<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7)
document.getElementById("demo").innerHTML = part;
</script>

</body>
</html>

Se um parâmetro for negativo, a posição é contada a partir do final da string:

let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>Extract a part of a string counting from the end:</p>
<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);
document.getElementById("demo").innerHTML = part;
</script>

</body>
</html>

Este exemplo corta uma parte de uma string da posição -12 à posição -6:

let text = "Apple, Banana, Kiwi";
let part = text.slice(-12, -6);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>

<p>Extract a part of a string and return the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12,-6)
document.getElementById("demo").innerHTML = part;
</script>

</body>
</html>

Substring de string JavaScript()

substring() é semelhante a slice().

A diferença é que valores iniciais e finais menores que 0 são tratados como 0 em substring().

Exemplo

let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substring() method extract a part of a string and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substring(7,13);
</script>

</body>
</html>

Se você omitir o segundo parâmetro, substring() cortará o resto do corda.

String JavaScript substr()

substr() é semelhante a slice().

A diferença é que o segundo parâmetro especifica o comprimento da parte extraída.

Exemplo

let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7,6);
</script>

</body>
</html>

Se você omitir o segundo parâmetro, substr() cortará o resto do corda.

Exemplo

let str = "Apple, Banana, Kiwi";
let part = str.substr(7);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7);
</script>

</body>
</html>

Se o primeiro parâmetro for negativo, a posição conta a partir do final do corda.

Exemplo

let str = "Apple, Banana, Kiwi";
let part = str.substr(-4);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>The substr() method extract a part of a string and returns the extracted parts in a new string:</p>

<p id="demo"></p>

<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(-4);
</script>

</body>
</html>

Substituindo o conteúdo da string

O método replace() substitui um valor especificado por outro valor em uma string:

Exemplo

let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

Experimente você mesmo →

<!DOCTYPE html>
<html>

<body>

<h1>JavaScript String Methods</h1>
<p>Replace &quot;Microsoft&quot; with &quot;W3Schools&quot; in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace("Microsoft","W3Schools");
}
</script>

</body>
</html>

Observação

O método replace() não altera a string em que é chamado.

O método replace() retorna uma nova string.

O método replace() substitui apenas a primeira correspondência

Se você quiser substituir todas as correspondências, use uma expressão regular com o sinalizador /g definido. Veja exemplos abaixo.

Por padrão, o método replace() substitui apenas a primeira correspondência:

Exemplo

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft and Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace("Microsoft","W3Schools");
}
</script>

</body>
</html>

Por padrão, o método replace() diferencia maiúsculas de minúsculas. Escrevendo MICROSOFT (com maiúsculas) não funcionará:

Exemplo

let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "W3Schools");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Try to replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace("MICROSOFT","W3Schools");
}
</script>

<p>The replace() method is case sensitive. MICROSOFT (with upper-case) will not be replaced.</p>

</body>
</html>

Para substituir sem distinção entre maiúsculas e minúsculas, use uma expressão regular por um sinalizador /i (sem distinção):

Exemplo

let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "W3Schools");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace(/MICROSOFT/i,"W3Schools");
}
</script>

</body>
</html>

Observação

Expressões regulares são escritas sem aspas.

Para substituir todas as correspondências, use uma expressão regular com um sinalizador /g (correspondência global):

Exemplo

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g, "W3Schools");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Replace all occurrences of "Microsoft" with "W3Schools" in the paragraph below:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Please visit Microsoft and Microsoft!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML; 
  document.getElementById("demo").innerHTML =
  text.replace(/Microsoft/g,"W3Schools");
}
</script>

</body>
</html>

Observação

Você aprenderá muito mais sobre expressões regulares no capítulo JavaScript Regular Expressões.

String JavaScript SubstituirTudo()

Em 2021, o JavaScript introduziu o método string replaceAll():

Exemplo

text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>

<p>ES2021 intoduced the string method replaceAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

O método replaceAll() permite que você especifique um expressão regular em vez de uma string a ser substituída.

Se o parâmetro for uma expressão regular, o sinalizador global (g) deverá ser definido, caso contrário um TypeError é lançado.

Exemplo

text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>

<p>ES2021 intoduced the string method replaceAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular";
text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Observação

replaceAll() é um recurso do ES2021.

replaceAll() não funciona no Internet Explorer.

Convertendo para maiúsculas e minúsculas

Uma string é convertida para maiúsculas com toUpperCase():

Uma string é convertida para minúsculas com toLowerCase():

String JavaScript paraUpperCase()

Exemplo

let text1 = "Hello World!";
let text2 = text1.toUpperCase();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Convert string to upper case:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.toUpperCase();
}
</script>

</body>
</html>

String JavaScript paraLowerCase()

Exemplo

let text1 = "Hello World!";       // String
let text2 = text1.toLowerCase();  // text2 is text1 
converted to lower

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Convert string to lower case:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.toLowerCase();
}
</script>

</body>
</html>

String JavaScript concat()

concat() une duas ou mais strings:

Exemplo

let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String</h1>
<h2>The concat() Method</h2>

<p>The concat() method joins two or more strings:</p>

<p id="demo"></p>

<script>
let text1 = "Hello";
let text2 = "World!";
let text3 = text1.concat(" ",text2);
document.getElementById("demo").innerHTML = text3;
</script>

</body>
</html>

O método concat() pode ser usado em vez do operador mais. Essas duas linhas fazem o mesmo:

Exemplo

text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");

Observação

Todos os métodos de string retornam uma nova string. Eles não modificam a string original.

Disse formalmente:

Strings são imutáveis: Strings não podem ser alteradas, apenas substituídas.

Corte de string JavaScript()

O método trim() remove espaços em branco de ambos os lados de uma string:

Exemplo

let text1 = "      Hello World!      ";
let text2 = text1.trim();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trim() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trim();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

String JavaScript trimStart()

ECMAScript 2019 adicionou o método String trimStart() ao JavaScript. <p>O método trimStart() funciona como trim(), mas remove espaços em branco apenas a partir do início do uma linha.

Exemplo

let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimStart() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

JavaScript String trimStart() é compatível com todos os navegadores modernos desde janeiro de 2020:

Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
Apr 2018 Jan 2020 Jun 2018 Sep 2018 May 2018

String JavaScript trimEnd()

ECMAScript 2019 adicionou o método string trimEnd() ao JavaScript. <p>O método trimEnd() funciona como trim(), mas remove espaços em branco apenas do final de uma linha.

Exemplo

let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimEnd() Method</h2>

<p id="demo"></p>

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

JavaScript String trimEnd() é compatível com todos os navegadores modernos desde janeiro de 2020:

Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
Apr 2018 Jan 2020 Jun 2018 Sep 2018 May 2018

Preenchimento de string JavaScript

ECMAScript 2017 adicionou dois novos métodos de string ao JavaScript: padStart() e padEnd() para suportar preenchimento no início e no final de uma string.

JavaScript String padStart()

O método padStart() preenche uma string desde o início.

Ele preenche uma string com outra string (várias vezes) até atingir um determinado comprimento.

Exemplos

Preencha uma string com "0" até atingir o comprimento 4:

let text = "5";
let padded = text.padStart(4,"0");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>

<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
text = text.padStart(4,"0");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Preencha uma string com "x" até atingir o comprimento 4:

let text = "5";
let padded = text.padStart(4,"x");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>

<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padStart(4,"x");
</script>

</body>
</html>

Observação

O método padStart() é um método de string.

Para preencher um número, primeiro converta o número em uma string.

Veja o exemplo abaixo.

Exemplo

let numb = 5;
let text = numb.toString();
let padded = text.padStart(4,"0");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>

<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let numb = 5;
let text = numb.toString();
document.getElementById("demo").innerHTML = text.padStart(4,0);
</script>

</body>
</html>

Suporte ao navegador

padStart() é um recurso do ECMAScript 2017.

É compatível com todos os navegadores modernos:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padStart() não é compatível com o Internet Explorer.

String JavaScript padEnd()

O método padEnd() preenche uma string do final.

Ele preenche uma string com outra string (várias vezes) até atingir um determinado comprimento.

Exemplos

let text = "5";
let padded = text.padEnd(4,"0");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>

<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
text = text.padEnd(4,"0");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

let text = "5";
let padded = text.padEnd(4,"x");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>

<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padEnd(4,"x");
</script>

</body>
</html>

Observação

O método padEnd() é um método de string.

Para preencher um número, primeiro converta o número em uma string.

Veja o exemplo abaixo.

Exemplo

let numb = 5;
let text = numb.toString();
let padded = text.padEnd(4,"0");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The padEnd() Method</h2>

<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

<p id="demo"></p>

<script>
let numb = 5;
let text = numb.toString();
document.getElementById("demo").innerHTML = text.padEnd(4,"x");
</script>

</body>
</html>

Suporte ao navegador

padEnd() é um recurso do ECMAScript 2017.

É compatível com todos os navegadores modernos:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padEnd() não é compatível com o Internet Explorer.

Extraindo caracteres de string

Existem 3 métodos para extrair caracteres de string:

  • charAt(posição)

  • charCodeAt(posição)

  • Acesso à propriedade [ ]

String JavaScript charAt()

O método charAt() retorna o caractere em um valor especificado índice (posição) em uma string:

Exemplo

let text = "HELLO WORLD";
let char = text.charAt(0);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String</h1>
<h2>The charAt() Method</h2>

<p>The charAt() method returns the character at a given position in a string:</p>

<p id="demo"></p>

<script>
var text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charAt(0);
</script>

</body>
</html>

String JavaScript charCodeAt()

O método charCodeAt() retorna o unicode do caractere em um índice especificado em uma string:

O método retorna um código UTF-16 (um número inteiro entre 0 e 65535).

Exemplo

let text = "HELLO WORLD";
let char = text.charCodeAt(0);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String</h1>
<h2>The charCodeAt() Method</h2>

<p>The charCodeAt() method returns the unicode of the character at a given position in a string:</p>

<p id="demo"></p>

<script>
let text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charCodeAt(0);
</script>

</body>
</html>

Acesso à propriedade

ECMAScript 5 (2009) permite acesso à propriedade [ ] em strings:

Exemplo

let text = "HELLO WORLD";
let char = text[0];

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>Property access on strings:</p>

<p>The first character in the string is:</p>
<p id="demo"></p>

<script>
let text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text[0];
</script>
</body>
</html>

Observação

O acesso à propriedade pode ser um pouco imprevisível:

  • Faz com que as strings pareçam arrays (mas não são)

  • Se nenhum caractere for encontrado, [] retornará indefinido, enquanto charAt() retornará uma string vazia.

  • É somente leitura. str[0]="A" não dá erro (mas não funciona!)

Exemplo

let text = "HELLO WORLD";
text[0] = "A";    // Gives no error, but does not work

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>Property acces on strings are read only:</p>

<p id="demo"></p>

<script>
let text = "HELLO WORLD";

text[0] = "A";  // Does not work

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Convertendo uma String em um Array

Se quiser trabalhar com uma string como um array, você pode convertê-la em um array.

Divisão de string JavaScript()

Uma string pode ser convertida em um array com o método split():

Exemplo

text.split(",")    // Split on commas
text.split(" ")    // Split on spaces
text.split("|")    // Split on pipe

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Display the first array element, after a string split:</p>

<p id="demo"></p>

<script>
let text = "a,b,c,d,e,f";
const myArray = text.split(",");
document.getElementById("demo").innerHTML = myArray[0];
</script>

</body>
</html>

Se o separador for omitido, o array retornado conterá a string inteira no índice [0].

Se o separador for "", o array retornado será um array de personagens:

Exemplo

text.split("")

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<h2>The split().Method</h2>

<p id="demo"></p>

<script>
let text = "Hello";
const myArr = text.split("");

text = "";
for (let i = 0; i < myArr.length; i++) {
  text += myArr[i] + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Referência completa de string

Para uma referência completa de String, acesse:

Referência completa de string JavaScript.

A referência contém descrições e exemplos de todas as propriedades e métodos de string.