10

Ao utilizar o método de jQuery .html() para aplicar múltiplas linhas de texto ou código HTML a um elemento, o mesmo falha com erro:

Exemplo no JSFiddle

$(function(){
     $( '.qualquerClasse' ).html( ' conteúdo de 3 linhas de código: uma
         Duas
         Três' 
     );
});

Vai gerar o erro:

Error: SyntaxError: unterminated string literal

Pergunta

Como proceder para aplicar múltiplas linhas entre as aspas?

5
  • Já tentou jogar tudo numa string só? Commented 4/02/2014 às 2:35
  • 3
    Olá Thiago, não se esqueça de formatar códigos postados, na tela de edição você só precisa selecionar o código e clicar no botão {} (ou pressionar o atalho Ctrl+K) Commented 4/02/2014 às 2:56
  • Se você estiver precisando fazer isso seguidamente, pode valer a pena conferir um esquema de templates como o Handlebars.
    – elias
    Commented 4/02/2014 às 10:57
  • Obrigado a todos pela ajuda. Estou me familiarizando com as funções do stackoverflow ( e também do jQuery kkk), Fabrício Matté sem palavras, respondeu de imediato e com alternativas fantásticas. Vou verificar qual funciona melhor e depois comentarei mais. Zuul valeu pela edição e formatação .
    – Thiago Jem
    Commented 4/02/2014 às 13:06
  • @elias, já era uma pessoa antenada nas melhores formas de desenvolvimento web na êpoca, 11 mêses atrás, parabéns cara! Template engines era realmente o que precisava, mas na êpoca nem percebi isso; 2 mêses depois descobri e fiz um projeto com node.js, express.js e jade.js ficou bom, no entanto, a melhor forma que achei, e que uso atualmente, é o yeoman, aprendi a forma correta de instalar e usar assistindo o curso do Jesus condé, não usei mais template engine coloquei os conteúdos nos arrays.
    – Thiago Jem
    Commented 25/01/2015 às 17:16

4 Respostas 4

18

JavaScript não permite caracteres de quebra de linhas literais dentro de strings.

Existem várias formas de contornar o problema.

Caso você realmente queira quebras de linha dentro da string, use \n:

 $( '.qualquerClasse' ).html( 'conteúdo de 3 linhas de código: uma \n Duas \n Três' );

Porém note que caracteres de quebra de linha dentro do HTML por padrão não são renderizadas (espaços colapsados) a menos que esteja dentro de um elemento cujo valor computado da propriedade CSS white-space seja pre/pre-wrap/pre-line. Caso contrário (na maioria dos casos) é necessário utilizar <br> para forçar uma quebra de linha visível.

Caso você deseje quebrar o texto em várias linhas para deixá-lo mais legível, é possível concatenar ou utilizar um array:

 $( '.qualquerClasse' ).html(
     ' conteúdo de 3 linhas de código: uma'
     + 'Duas'
     + 'Três'
 );
 //ou
 $( '.qualquerClasse' ).html([
     ' conteúdo de 3 linhas de código: uma',
     'Duas',
     'Três'
 ].join(''));

Claro que podes adicionar \n ou <br> conforme necessário nestas strings.


Também existe uma forma, não padrão, de "escapar" as quebra de linha colocando um \ logo antes da quebra de linha literal:

$( '.qualquerClasse' ).html( ' conteúdo de 3 linhas de código: uma\
     Duas\
     Três'
);

Esta sintaxe não é padrão, mas tem um suporte muito bom. Porém, alguns browsers mantém os caracteres de quebra de linha dentro da string enquanto outros o descartam, portanto esta forma é um pouco inconsistente. Outro problema é que se adicionar qualquer caractere após o \, até mesmo um caractere de espaço, irá gerar um erro de sintaxe já que a quebra de linha não mais estará sendo escapada.

1
  • @FabrícioMatté oi! Se juntares template strings a resposta fica modernizada :)
    – Sergio
    Commented 21/11/2016 às 5:54
4

So para complementar: recomendo o uso de Coffeescript, um pre-processador de javascript (do mesmo modo que SASS/LESS pre-processam CSS).

Cofeescript oferece uma sintaxe muito mais conveniente e legivel. Uma das muitas vantagens e' a possibilidade de definir strings multi-line:

mobyDick = "Call me Ishmael. Some years ago --
  never mind how long precisely -- having little
  or no money in my purse, and nothing particular
  to interest me on shore, I thought I would sail
  about a little and see the watery part of the
  world..."

Ou com """ para manter a formatacao/indentacao:

html = """
       <strong>
         cup of coffeescript
       </strong>
       """
2

Uma forma simples, mas não muito recomendada por facilitar o erro é simplesmente escapar a quebra de linha com uma barra \

 $( '.qualquerClasse' ).html( ' conteúdo de 3 linhas de código: uma\
     Duas\
     Três' 
 );

Mas a forma mais recomendada, que evita erros e não atrapalha a minificação do código para produção é a mostrada pelo Fabrício Matté aqui.

1
  • Interessante resposta, por apontar o motivo de ser algo não recomendado.
    – Syzoth
    Commented 23/09/2015 às 13:37
1

ES6 (ECMAScript 2015) e os Template literals (Template strings)

Os "templates literals" tem suporte em:

  • Chrome 41+
  • Edge 12+
  • Firefox 34+
  • Safari 9+
  • WebView Android 41+
  • Node.js 4+

Eles suportam quebra de linhas, o que facilita muito a "digitação", exemplo:

$(function(){
   $( '.qualquerClasse' ).html( ` conteúdo de 3 linhas de código: uma
       Duas
       Três` );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<pre class="qualquerClasse"></pre>

Eles suportam bem mais do que quebras de linhas, ele é um esquema de "template", podendo passar variáveis assim ${var1} teste ${var2}, por exemplo:

var x = 3, y = 100;

console.log(`O x é ${x}
e o y é ${y}`);

Seria equivalente a:

var x = 3, y = 100;

console.log('O x é ' + x + '\ne o y é ' + y);

Além de variáveis ele também suporta operações, por exemplo:

var x = 3, y = 100;

console.log(`${x}+${y} = ${x + y} e
5 * ${x} + 1 = ${5 * x + 1}.`);

Seria equivalente a:

var x = 3, y = 100;

console.log(x + '+' + y + ' = ' + (x + y) + ' e\n5 * ' + x + ' + 1 = ' + (5 * x + 1) + '.');

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .