moyen intelligent de raccourcir les longues chaînes avec javascript
Quelqu'un a-t-il une solution/bibliothèque plus sophistiquée pour raccourcir les chaînes avec JavaScript, que la solution évidente:
if(string.length > 25) {
string = string.substring(0,24)+"...";
}
String.prototype.trunc = String.prototype.trunc ||
function(n){
return (this.length > n) ? this.substr(0, n-1) + '…' : this;
};
Maintenant vous pouvez faire:
var s = 'not very long';
s.trunc(25); //=> not very long
s.trunc(5); //=> not ...
Si par "plus sophistiqué", vous voulez dire tronquer la dernière limite Word d'une chaîne, alors ceci pourrait être ce que vous voulez:
String.prototype.trunc =
function( n, useWordBoundary ){
if (this.length <= n) { return this; }
var subString = this.substr(0, n-1);
return (useWordBoundary
? subString.substr(0, subString.lastIndexOf(' '))
: subString) + "…";
};
maintenant tu peux faire:
s.trunc(11,true) // => not very...
Si vous ne souhaitez pas étendre les objets natifs, vous pouvez utiliser:
function truncate( n, useWordBoundary ){
if (this.length <= n) { return this; }
var subString = this.substr(0, n-1);
return (useWordBoundary
? subString.substr(0, subString.lastIndexOf(' '))
: subString) + "…";
};
// usage
truncate.apply(s, [11, true]); // => not very...
Notez que cela ne doit être fait que pour Firefox.
Tout autre les navigateurs supportent une solution CSS (voir support table ):
p {
white-space: nowrap;
width: 100%; /* IE6 needs any width */
overflow: hidden; /* "overflow" value must be different from visible"*/
-o-text-overflow: Ellipsis; /* Opera < 11*/
text-overflow: Ellipsis; /* IE, Safari (WebKit), Opera >= 11, FF > 6 */
}
L'ironie est que j'ai obtenu cet extrait de code de Mozilla MDC.
Utilisez soit lodash's tronquer
_.truncate('hi-diddly-ho there, neighborino');
// → 'hi-diddly-ho there, neighbo…'
ou underscore.string est tronqué .
_('Hello world').truncate(5); => 'Hello...'
Il existe des raisons valables pour lesquelles les utilisateurs souhaitent utiliser JavaScript au lieu de CSS.
Pour tronquer 8 caractères (y compris les Ellipsis) en JavaScript:
short = long.replace(/(.{7})..+/, "$1…");
ou
short = long.replace(/(.{7})..+/, "$1…");
Voici ma solution, qui présente quelques améliorations par rapport à d'autres suggestions:
String.prototype.truncate = function(){
var re = this.match(/^.{0,25}[\S]*/);
var l = re[0].length;
var re = re[0].replace(/\s$/,'');
if(l < this.length)
re = re + "…";
return re;
}
// "This is a short string".truncate();
"This is a short string"
// "Thisstringismuchlongerthan25characters".truncate();
"Thisstringismuchlongerthan25characters"
// "This string is much longer than 25 characters and has spaces".truncate();
"This string is much longer…"
Il:
- Se tronque sur le premier espace après 25 Caractères
- Étend l'objet JavaScript String, Afin qu'il puisse être utilisé sur (et lié à) N'importe quelle chaîne.
- Coupe la chaîne si la troncature Entraîne un espace de fin;
- Ajoutera l'entité hellip unicode .__ (Ellipsis) si la chaîne tronquée contient plus de 25 caractères
La plupart des frameworks Javascript modernes ( JQuery , Prototype , etc ...) ont une fonction utilitaire ajoutée à String qui gère cela.
Voici un exemple dans Prototype:
'Some random text'.truncate(10);
// -> 'Some ra...'
Cela semble être l’une de ces fonctions que vous souhaitez confier à une autre personne. Je laisserais le framework s'en charger plutôt que d'écrire plus de code.
Tous les navigateurs modernes prennent désormais en charge une solution CSS simple pour ajouter automatiquement un ellipsis si une ligne de texte dépasse la largeur disponible:
p {
white-space: nowrap;
overflow: hidden;
text-overflow: Ellipsis;
}
(Notez que cela nécessite que la largeur de l'élément soit limitée d'une certaine manière pour avoir un effet.)
Basé sur https://css-tricks.com/snippets/css/truncate-string-with-Ellipsis/ .
Il convient de noter que cette approche ne limite pas en fonction du nombre de caractères. Not ne fonctionne pas non plus si vous devez autoriser plusieurs lignes de texte.
Parfois, les noms de fichiers sont numérotés, l’index pouvant se trouver au début ou à la fin. Je voulais donc raccourcir au centre de la chaîne:
function stringTruncateFromCenter(str, maxLength) {
const midChar = "…"; // character to insert into the center of the result
var left, right;
if (str.length <= maxLength) return str;
// length of beginning part
left = Math.ceil(maxLength / 2);
// start index of ending part
right = str.length - Math.floor(maxLength / 2) + 1;
return str.substr(0, left) + midChar + str.substring(right);
}
Sachez que j'ai utilisé ici un caractère de remplissage avec plus d'un octet dans UTF-8.
Meilleure fonction que j'ai trouvée. Crédit à text-Ellipsis.
function textEllipsis(str, maxLength, { side = "end", Ellipsis = "..." } = {}) {
if (str.length > maxLength) {
switch (side) {
case "start":
return Ellipsis + str.slice(-(maxLength - Ellipsis.length));
case "end":
default:
return str.slice(0, maxLength - Ellipsis.length) + Ellipsis;
}
}
return str;
}
Exemples:
var short = textEllipsis('a very long text', 10);
console.log(short);
// "a very ..."
var short = textEllipsis('a very long text', 10, { side: 'start' });
console.log(short);
// "...ng text"
var short = textEllipsis('a very long text', 10, { textEllipsis: ' END' });
console.log(short);
// "a very END"
J'ai peut-être manqué un exemple de cas où quelqu'un manipule des valeurs nulles, mais 3 réponses TOP ne fonctionnaient pas pour moi lorsque j'avais des valeurs nulles (Bien sûr, je me rends compte que la gestion des erreurs est un million de choses autres n'est pas la responsabilité de la personne qui a répondu à la question, mais depuis. J'avais utilisé une fonction existante avec l'une des excellentes réponses à Ellipsis sur la troncature que je pensais pouvoir fournir aux autres.
par exemple.
javascript:
news.comments
en utilisant la fonction de troncature
news.comments.trunc(20, true);
Cependant, sur news.comments étant null cela "casserait"
Finale
checkNull(news.comments).trunc(20, true)
fonction tronquée avec la permission de KooiInc
String.prototype.trunc =
function (n, useWordBoundary) {
console.log(this);
var isTooLong = this.length > n,
s_ = isTooLong ? this.substr(0, n - 1) : this;
s_ = (useWordBoundary && isTooLong) ? s_.substr(0, s_.lastIndexOf(' ')) : s_;
return isTooLong ? s_ + '…' : s_;
};
Mon vérificateur null simple (vérifie littéralement "null", chose aussi (Ceci attrape indéfini, "", null, "null", etc.)
function checkNull(val) {
if (val) {
if (val === "null") {
return "";
} else {
return val;
}
} else {
return "";
}
}
Avec une rapide recherche sur Google, j'ai trouvé ceci ... Est-ce que cela fonctionne pour vous?
/**
* Truncate a string to the given length, breaking at Word boundaries and adding an elipsis
* @param string str String to be truncated
* @param integer limit Max length of the string
* @return string
*/
var truncate = function (str, limit) {
var bits, i;
if (STR !== typeof str) {
return '';
}
bits = str.split('');
if (bits.length > limit) {
for (i = bits.length - 1; i > -1; --i) {
if (i > limit) {
bits.length = i;
}
else if (' ' === bits[i]) {
bits.length = i;
break;
}
}
bits.Push('...');
}
return bits.join('');
};
// END: truncate
Vous pouvez utiliser la fonction Ext.util.Format.Ellipsis si vous utilisez Ext.js.
J'ai voté pour la solution de Kooilnc. Solution compacte vraiment sympa. Il y a un petit cas Edge que je voudrais aborder. Si quelqu'un entre une très longue séquence de caractères pour une raison quelconque, elle ne sera pas tronquée:
function truncate(str, n, useWordBoundary) {
var singular, tooLong = str.length > n;
useWordBoundary = useWordBoundary || true;
// Edge case where someone enters a ridiculously long string.
str = tooLong ? str.substr(0, n-1) : str;
singular = (str.search(/\s/) === -1) ? true : false;
if(!singular) {
str = useWordBoundary && tooLong ? str.substr(0, str.lastIndexOf(' ')) : str;
}
return tooLong ? str + '…' : str;
}
la réponse de c_harm est à mon avis la meilleure. Veuillez noter que si vous souhaitez utiliser
"My string".truncate(n)
vous devrez utiliser un constructeur d'objet regexp plutôt qu'un littéral. De plus, vous devrez échapper le \S lors de la conversion.
String.prototype.truncate =
function(n){
var p = new RegExp("^.{0," + n + "}[\\S]*", 'g');
var re = this.match(p);
var l = re[0].length;
var re = re[0].replace(/\s$/,'');
if (l < this.length) return re + '…';
};
J'ai récemment eu à faire cela et je me suis retrouvé avec:
/**
* Truncate a string over a given length and add Ellipsis if necessary
* @param {string} str - string to be truncated
* @param {integer} limit - max length of the string before truncating
* @return {string} truncated string
*/
function truncate(str, limit) {
return (str.length < limit) ? str : str.substring(0, limit).replace(/\w{3}$/gi, '...');
}
Se sent bien et propre à moi :)
.wrap{
text-overflow: Ellipsis
white-space: nowrap;
overflow: hidden;
width:"your desire width";
}
<p class="wrap">He this is code</p>
Utilisez le code suivant
function trancateTitle (title) {
var length = 10;
if (title.length > length) {
title = title.substring(0, length)+'...';
}
return title;
}
Quelque part intelligent: D
//My Huge Huge String
let tooHugeToHandle = `It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).`
//Trim Max Length
const maxValue = 50
// The barber.
const TrimMyString = (string, maxLength, start = 0) => {
//Note - `start` is if I want to start after some point of the string
if (string.length > maxLength) {
let trimmedString = string.substr(start, maxLength)
return (
trimmedString.substr(
start,
Math.min(trimmedString.length, trimmedString.lastIndexOf(' '))
) + ' ...'
)
}
return string
}
console.log(TrimMyString(tooHugeToHandle, maxValue))J'aime utiliser .slice () Le premier argument est l'index de départ et le second est l'index de fin. Tout ce qui est entre les deux est ce que vous récupérez.
var long = "hello there! Good day to ya."
// hello there! Good day to ya.
var short = long.slice(0, 5)
// hello
Corriger la solution de Kooilnc:
String.prototype.trunc = String.prototype.trunc ||
function(n){
return this.length>n ? this.substr(0,n-1)+'…' : this.toString();
};
Cela retourne la valeur de chaîne à la place de l'objet String s'il n'a pas besoin d'être tronqué.
('long text to be truncated').replace(/(.{250})..+/, "$1…");
D'une manière ou d'une autre, le code ci-dessus ne fonctionnait pas pour une sorte de texte collé ou écrit dans l'application Vuejs. J'ai donc utilisé lodash tronqué et cela fonctionne maintenant bien.
_.truncate('long text to be truncated', { 'length': 250, 'separator': ' '});