0

Tenho um objeto com um atributo do tipo String que possui um texto muito grande, e estou precisando organizar essa string de forma que o texto fique organizado e mais bonito.

Gostaria de saber se existe alguma plugins JS que resolva meu problema ou solução com CSS e se alguém ja passou por essa situação, e me desse uma ideia de como resolver o problema.

O objeto está vindo assim:

EX:

var obj = {
    text: 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.'
}

Na view o texto está exatamente do jeito que vem do objeto, e basicamente quero colocar parágrafos nesse texto.

PS: Basicamente quero adicionar parágrafos nessa string

7
  • 1
    Acho que você deve estar procurando por algum estilo em CSS para melhorar a apresentação. A String no js será uma String. Com formatar, você quer dizer capitalizar as palavras, algo do tipo, ou quanto a formatação em tela mesmo?
    – BrTkCa
    15/12/2016 às 18:37
  • Cara, eu recebo várias strings, e todas são muito grandes. No caso, eu só quero melhorar a apresentação. Não sabia que era possivel fazer algo com o CSS. O que eu quero é fazer o texto ter parágrafos, basicamente. 15/12/2016 às 18:41
  • 1
    Coloque seu código, talvez um print do resultado e explique como gostaria que ficasse, adicione mais detalhes para que alguém possa ajudá-lo.
    – MagicHat
    15/12/2016 às 18:43
  • Coloquei um trecho ai... não sei se ajuda 15/12/2016 às 18:46
  • eu só não quero que o texto fique parecendo que foi escrito por uma criança de 8 anos de idade rsrs. 15/12/2016 às 18:47

2 Respostas 2

1

Uma dica é delimitar o tamanho do componente de saída, deixar a marcação de palavras para quebrar palavra, exibir em bloco e alinhar justificado. Veja o resultado:

#conteudo {
  width: 300px;
  word-wrap: break-word;
  display: inline-block;
  text-align:justify;
}

var obj = {
  text: 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.'
}

document.getElementById("conteudo").innerHTML = obj.text;
#conteudo {
  width: 300px;
  word-wrap: break-word;
  display: inline-block;
  text-align:justify;
}
<div id="conteudo">
</div>

0

Pode usar essa solução com Regex, entretanto, dependendo dos padrões que forem aparecendo em seu texto, terá que adicionar novas regras.

<script>
var obj = 
{
    text: 'Contrary to popular belief, Lorem Ipsum is not simply random text.It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.'
}

document.write(JSON.stringify(obj).replace(/(?:\bBC|[^\sA-Z])\.(?=\s|[A-Z])/g, '$&<br><br>'));
</script>

Regex baseada nessa resposta

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 .