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.

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>
document.querySelector('.descricao')
é qual tag do html?