1

Estou consumindo uma API, e nessa API possui uma descrição. Gostaria de exibir essa descrição com um limite de caracteres, e caso ultrapasse esse limite, que adicione um (...) ao final ou vá até o último ponto final.

O código que eu tenho é algo do tipo:

let descricao = document.querySelector('.descricao').
descricao.innerHTML = `<p>${dado.descricao}</p>`

Eu gostaria que esse parágrafo tivesse uma limitação de 130 caracteres, alguém sabe como fazer?

1
  • document.querySelector('.descricao') é qual tag do html? 20/07/2019 às 21:15

4 Respostas 4

2

Basta verificar se a string contém mais de 130 caracteres com .length(). Se tiver, você pega os caracteres do 1º até o 130º com .substr(0,130) e concatena com "...".

Exemplo:

var dado = {
   // 445 caracteres
   descricao: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

let descricao = document.querySelector('.descricao');
let descricao_txt = dado.descricao;
if(descricao_txt.length > 130) descricao_txt = descricao_txt.substr(0,130)+"...";
descricao.innerHTML = `<p>${descricao_txt}</p>`;
<div class="descricao"></div>

1

O método ".substr()" nem sempre produz resultados corretos

Teste 1 - Resultado esperado para 8 carateres: "12345678...".

let dado = {
        descricao: `123456789`
};

let resultA = dado.descricao.substr(0, 8) + '...';
let resultB = dado.descricao.replace(/([\u{0}-\u{10FFFF}]{8}).*/u, '$1...');

console.log(resultA, resultB, (resultA === resultB)); // 12345678... 12345678... true

Teste 2 - Resultado esperado para 8 carateres: "1😀3😁5😂7😃...".
Nota: Vai dar erro se usar o método .substr().

let dado = {
        descricao: `1😀3😁5😂7😃9...`
};

let resultA = dado.descricao.substr(0, 8) + '...'; // resultado incorreto <----
let resultB = dado.descricao.replace(/([\u{0}-\u{10FFFF}]{8}).*/u, '$1...'); // resultado correto

console.log(resultA, resultB, (resultA === resultB)); // 1😀3😁5�... 1😀3😁5😂7😃... false

Conclusão:
.replace(//u,) unicode.

Se o texto contém mais de 130 caracteres pega os todos caracteres até ao caracter 130 e adiciona "...".
Esta solução nunca concatena com "..." se tiver menos de 130 carateres sendo desnecessário o uso de if ou qualquer outra condição e produz resultados corretos..., mas nem sempre, pelo menos em termos de quantidade de carateres visuais como por exemplo 👩‍❤️‍👩.

Nota: Provavelmente em certas circunstâncias poderá ser necessário o uso de .normalize().replace(//u,). § Length and combining marks - (What every JavaScript developer should know about Unicode).
Nota: O método .normalize() também falha quando um determinado carater contém mais de uma marca de combinação diacrítica como por exemplo ȩ́ ("e\u0327\u0301f").

let dado = {
        descricao: `Et quia atque et dolores magni ea ullam molestias? Hic molestiae soluta ex galisum dicta ab voluptatem quia. Cum mollitia autem cum voluptatem magnam sit unde amet qui delectus laudantium sed earum quia. Non consequatur sint a consequatur inventore et internos possimus id adipisci beatae et corrupti tempora.`
    };

document.querySelector('.descricao')
        .innerHTML = `<p>${dado.descricao.replace(/([\u{0}-\u{10FFFF}]{130}).*/u, '$1...')}</p>`;
<div class="descricao"></div>

Outros métodos que produzem resultados aproximadamente corretos:
Nota: Para os seguintes métodos será nesseçário a utilização de pelo menos uma condição if ou outra qualquer.

Usando o operador "spread" ...

var dado = {
        descricao: `Et quia atque et dolores magni ea ullam molestias? Hic molestiae soluta ex galisum dicta ab voluptatem quia. Cum mollitia autem cum voluptatem magnam sit unde amet qui delectus laudantium sed earum quia. Non consequatur sint a consequatur inventore et internos possimus id adipisci beatae et corrupti tempora.`
};

let c; (c = [...dado.descricao]).length = 130;
    document.querySelector('.descricao').innerHTML = `<p>${dado.descricao.length > 130 ? c.join('') + '...' : dado.descricao}</p>`;
<div class="descricao"></div>

Ou usando o método Array.from()

let dado = {
        descricao: `Et quia atque et dolores magni ea ullam molestias? Hic molestiae soluta ex galisum dicta ab voluptatem quia. Cum mollitia autem cum voluptatem magnam sit unde amet qui delectus laudantium sed earum quia. Non consequatur sint a consequatur inventore et internos possimus id adipisci beatae et corrupti tempora.`
};

let c; (c = Array.from(dado.descricao)).length = 130;  
    document.querySelector('.descricao').innerHTML = `<p>${dado.descricao.length > 130 ? c.join('') + '...' : dado.descricao}</p>`;
<div class="descricao"></div>

Ou usando o laço for of

let dado = {
        descricao: `Et quia atque et dolores magni ea ullam molestias? Hic molestiae soluta ex galisum dicta ab voluptatem quia. Cum mollitia autem cum voluptatem magnam sit unde amet qui delectus laudantium sed earum quia. Non consequatur sint a consequatur inventore et internos possimus id adipisci beatae et corrupti tempora.`
};

let newTxt = '';
    for (let c of dado.descricao) {
        if (newTxt.length < 130) {
            newTxt += c;
        }
        else {
            break;
        }
    }

let div = document.querySelector('.descricao');
let p = document.createElement('p');
let newTxtText = document.createTextNode(`${dado.descricao.length > 130 ? newTxt + '...' : dado.descricao}`);
p.appendChild(newTxtText);
div.replaceChildren(p);
<div class="descricao"></div>

Solução final

*¡Resolve tudo!???*

Intl.Segmenter ⇒ O objeto Intl.Segmenter habilita a segmentação de texto, permitindo que você obtenha carateres (clusters de grafemas 👨‍👩‍👧‍👦, grafemas simples ou com diacríticos múltiplos ȩ́), palavras ou segmentos de frases contidas em uma String de forma correta.

Intl.Segmenter

    let dado = {
        descricao: `Et quia atque et dolores magni ea ullam molestias? Hic molestiae soluta ex galisum dicta ab voluptatem quia. Cum mollitia autem cum voluptatem magnam sit unde amet qui delectus laudantium sed earum quia. Non consequatur sint a consequatur inventore et internos possimus id adipisci beatae et corrupti tempora.`
    };

    let segmenter = new Intl.Segmenter();
    let segments = Array.from(segmenter.segment(dado.descricao));

    let newTxt = '', it = 0, visualTxtLen = 130;
    if (segments.length > visualTxtLen) {
        for (const segment of segments) {
            if (it++ < visualTxtLen) {
                newTxt += segment.segment;
            } else {
                newTxt += '...';
                break;
            }
        }
    } else {
        newTxt = dado.descricao;
    }

    let div = document.querySelector('.descricao');
    let p = document.createElement('p');
    p.appendChild(document.createTextNode(newTxt));
    div.replaceChildren(p);
<div class="descricao"></div>

3
0

Você precisar contar quantos caracteres tem essa frase depois você usa a função substr que para subtrair uma string dizer a partir de qual casa deve começar e em qual deve terminar. como no exemplo abaixo vai contar 80 caracteres. ele começa no 0 e vai até o 79 que vai dar 80 caracteres. Vou deixar um código abaixo exemplificado.

const description = 'Commodo tempor consectetur est sunt laboris qui do non anim. Irure do incididunt voluptate ut et esse officia id nisi magna elit nulla laboris. Ullamco et id ullamco sint officia eu veniam tempor pariatur ex veniam aute culpa eiusmod.';

if (description.length >= 80)
   console.log(`${description.substr(0, 79)}...`);
else
   console.log(description);
0

Não é uma resposta directa à sua questão, mas poderá ser-lhe util.

.container{
  width:300px;
}

.single-line{
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  
  background-color: bisque;
}

.multi-line{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  overflow: hidden;
  background-color: darkkhaki;
}
<div class="container">

  <p class="single-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel maiores, obcaecati repellat cupiditate sed
            aliquam minus modi a autem ducimus fuga, vero quasi dicta molestiae alias impedit est sapiente magni?<p>
  
  <p class="multi-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel maiores, obcaecati repellat cupiditate sed
            aliquam minus modi a autem ducimus fuga, vero quasi dicta molestiae alias impedit est sapiente magni?<p>

</div>

Links:

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 .