Couper les espaces du début et de la fin de la chaîne


152

J'essaie de trouver un moyen de couper les espaces du début et de la fin de la chaîne de titre. J'utilisais ceci, mais cela ne semble pas fonctionner:

title = title.replace(/(^[\s]+|[\s]+$)/g, '');

Des idées?


1
var s = '1'; s = s. remplacer (/ ^ \ s + | \ s + $ / g, ''); alert ('-' + s + '-'); // cela fonctionne comme ça, vous n'avez pas besoin des parenthèses ou des accolades carrées.
ekerner le

2
Javascript est .trimintégré maintenant, c'est donc la réponse pour les navigateurs modernes: stackoverflow.com/a/3000900/29182
Ziggy

Reportez-vous à cet article: javascriptstutorial.com/blog/trim-string

function trim11 (str) { str = str.replace(/^\s+/, ''); for (var i = str.length - 1; i >= 0; i--) { if (/\S/.test(str.charAt(i))) { str = str.substring(0, i + 1); break; } } return str; }
Badri Gs

Réponses:


216

Remarque: à partir de 2015, tous les principaux navigateurs (y compris IE> = 9) prennent en charge String.prototype.trim () . Cela signifie que pour la plupart des cas d'utilisation, le simple fait de faire str.trim()est le meilleur moyen d'atteindre ce que la question demande.


Steven Levithan a analysé de nombreuses implémentations différentes de trimJavascript en termes de performances.

Sa recommandation est:

function trim1 (str) {
    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}

pour une "mise en œuvre à usage général qui est rapide entre les navigateurs", et

function trim11 (str) {
    str = str.replace(/^\s+/, '');
    for (var i = str.length - 1; i >= 0; i--) {
        if (/\S/.test(str.charAt(i))) {
            str = str.substring(0, i + 1);
            break;
        }
    }
    return str;
}

"si vous voulez gérer de longues chaînes d'une vitesse exceptionnelle dans tous les navigateurs".

Références


21
Les nouveaux Safari (5), Chrome (5), Firefox (3.6) et Opera (10.5) prennent tous en charge une méthode native de découpage String. Dans ce cas, j'attribuerais une méthode à String.prototype, si elle n'existe pas, plutôt qu'une nouvelle fonction globale.
kennebec

14
String.prototype.trim = String.prototype.trim || function trim() { return this.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); };
kojiro

3
Je doute qu'après de récentes améliorations sur les performances javascript, ce test soit toujours pertinent ou fiable comme il l'était au moment de cette réponse.
Eduardo

2
pourquoi utilisez-vous des caractères blancs doubles? aka pourquoi cette regex /^\s\s*/et pas celle-ci/^\s*/
aemonge

Pourquoi trim1et trim11?
Marty Cortez

68

Si l'utilisation de jQuery est une option:

/**
 * Trim the site input[type=text] fields globally by removing any whitespace from the
 * beginning and end of a string on input .blur()
 */
$('input[type=text]').blur(function(){
    $(this).val($.trim($(this).val()));
});

ou simplement:

$.trim(string);

48

Comme @ChaosPandion l'a mentionné, la String.prototype.trimméthode a été introduite dans la spécification ECMAScript 5th Edition , certaines implémentations incluent déjà cette méthode, donc le meilleur moyen est de détecter l'implémentation native et de la déclarer uniquement si elle n'est pas disponible:

if (typeof String.prototype.trim != 'function') { // detect native implementation
  String.prototype.trim = function () {
    return this.replace(/^\s+/, '').replace(/\s+$/, '');
  };
}

Ensuite, vous pouvez simplement:

title = title.trim();

1
Je suis toujours un peu perplexe par ce meme de vérifier si la propriété est une fonction. Si ce n'est pas une fonction, est-ce le bon comportement pour l'écraser? Vous devriez peut-être lancer une erreur dans ce cas.
kojiro

1
@kojiro, eh bien, peut-être que lancer une erreur serait bien, mais je le vois comme ceci: j'essaie de créer une cale conforme aux spécifications , et si ce String.prototype.trimn'est pas une fonction, ce n'est pas la String.prototype.trimméthode décrite sur la 5ème édition d'ECMAScript Spécification, la spécification garantit qu'il trims'agit d'un objet de fonction sur les environnements ES5.
CMS

7
throw { name: "UnlikelyPolyfillException", message: "Did someone really write a property on the String prototype named 'trim' that isn't a ECMA 5 compatible shim? Come on now, that's crazy." }
kojiro

34

Je sais que c'est un ancien post, mais je pensais juste partager notre solution. Dans la quête du code le plus court (tout le monde n'aime-t-il pas simplement les expressions régulières laconiques), on pourrait à la place utiliser:

title = title.replace(/(^\s+|\s+$)/g, '');

BTW: J'ai exécuté ce même test via le lien partagé ci-dessus blog.stevenlevithan.com - Trim JavaScript plus rapide et ce modèle a battu toutes les autres MAINS!

En utilisant IE8, test ajouté comme test13. Les résultats ont été:

Longueur d'origine: 226002
trim1: 110ms (longueur: 225994)
trim2: 79ms (longueur: 225994)
trim3: 172ms (longueur: 225994)
trim4: 203ms (longueur: 225994)
trim5: 172ms (longueur: 225994)
trim6: 312ms (longueur: 225994)
trim7: 203ms (longueur: 225994)
trim8: 47ms (longueur: 225994)
trim9: 453ms (longueur: 225994)
trim10: 15ms (longueur: 225994)
trim11: 16ms (longueur: 225994)
trim12: 31ms (longueur: 225994)
trim13: 0ms (longueur: 226002)



11

Ici, cela devrait faire tout ce dont vous avez besoin

function doSomething(input) {
    return input
              .replace(/^\s\s*/, '')     // Remove Preceding white space
              .replace(/\s\s*$/, '')     // Remove Trailing white space
              .replace(/([\s]+)/g, '-'); // Replace remaining white space with dashes
}

alert(doSomething("  something with  some       whitespace   "));

\ s \ s * semble redondant, car il y a \ s +, mais c'est un peu plus rapide
CaffGeek

4

Voici quelques méthodes que j'ai utilisées dans le passé pour couper des chaînes dans js:

String.prototype.ltrim = function( chars ) {
    chars = chars || "\\s*";
    return this.replace( new RegExp("^[" + chars + "]+", "g"), "" );
}

String.prototype.rtrim = function( chars ) {
    chars = chars || "\\s*";
    return this.replace( new RegExp("[" + chars + "]+$", "g"), "" );
}
String.prototype.trim = function( chars ) {
    return this.rtrim(chars).ltrim(chars);
}

Le RegExp ^[\s*]+correspond *au début de la chaîne, de sorte que votre fonction se limite "*** Foo"à "Foo".
Ferdinand Beyer

probablement :) je me demande pourquoi personne ne s'est plaint ... Il y a longtemps que j'ai écrit ce code, et il est utilisé dans en.wikipedia.org/wiki/Wikipedia:Twinkle . hors source maintenant que vous le faites remarquer, c'est évident.
azatoth

4

Voici mon code actuel, la 2ème ligne fonctionne si je commente la 3ème ligne, mais ne fonctionne pas si je la laisse telle quelle.

var page_title = $(this).val().replace(/[^a-zA-Z0-9\s]/g, '');
page_title = page_title.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
page_title = page_title.replace(/([\s]+)/g, '-');

supprimez la 2ème et la troisième ligne, et utilisez le code de polygenelubricants, page_title = trim1 (page_title);
fourmi

Donc, en fin de compte, vous essayez de nettoyer cette chaîne pour qu'elle soit coupée, alphanumérique et des tirets au lieu d'espaces comme séparateurs?
CaffGeek

@chad oui. Pour créer des URL de slug à la volée afin que les utilisateurs puissent voir à quoi ressemblera leur URL. Similaire à la façon dont wordpress le fait lors de la création de nouveaux articles de blog.
James Jeffery


2

jQuery.trim ("bonjour, comment vas-tu?");

:)


2
On dirait que vous faites peut-être un drôle, mais gardez à l'esprit que les gens qui liront ce commentaire pourraient être tentés d'utiliser votre solution et de progresser.
délimité

$ .trim ("blabh blah blah"); renvoie correctement "blabh blah blah"
RAY

2

Lorsque le DOM est complètement chargé, vous pouvez l'ajouter à tous les champs de texte. Je n'ai jamais eu de situation où je devais soumettre un espace de début ou de fin, donc le faire tout le temps à l'échelle mondiale a fonctionné pour moi ...

$(function() { $('input[type=text]').on('blur', function(){
    $(this).val($.trim($(this).val()));
  });
});

nécessite jQuery. Une autre question (je ne l'ai pas testée): blurse produit-il réellement avant la soumission lorsque je suis dans un champ et que je clique sur <kbd> entrée </kbd> pour envoyer un formulaire?
amenthes

2

C'est ce que suggère l'architecte JavaScript / Guru Douglas Crockford.

String.method('trim', function (  ) {
    return this.replace(/^\s+|\s+$/g, '');
});

Remarque: vous devez définir "méthode" pour Function.prototype.

Alternativement

String.prototype.trim = function () {
   return this.replace(/^\s+|\s+$/g, '');
};

title.trim();    // returns trimmed title

Observation

Dans les navigateurs récents, la méthode de découpage est incluse par défaut. Vous n'avez donc pas à l'ajouter explicitement.

Les principaux navigateurs Chrome, Firefox, Safari, etc. prennent en charge la méthode de coupe . Enregistré dans Chrome 55.0.2883.95 (64 bits), Firefox 51.0.1 (64 bits), Safari 10.0 (12602.1.50.0.10).


1
var word = " testWord ";   //add here word or space and test

var x = $.trim(word);

if(x.length > 0)
    alert('word');
else
    alert('spaces');

0

un essai récursif pour cela

function t(k){ 
    if (k[0]==' ') {
        return t(k.substr(1,k.length));
    } else if (k[k.length-1]==' ') {
        return t(k.substr(0,k.length-1));
    } else {
        return k;
    }
}

appelle comme ça:

t("      mehmet       "); //=>"mehmet"

si vous souhaitez filtrer des caractères spécifiques, vous pouvez définir une chaîne de liste en gros:

function t(k){
    var l="\r\n\t "; //you can add more chars here.
    if (l.indexOf(k[0])>-1) {
        return t(k.substr(1,k.length));
    } else if (l.indexOf(k[k.length-1])>-1) {
        return t(k.substr(0,k.length-1));
    } else {
        return k;
    }
}

Il y a une différence subtile par rapport à ce qui est demandé! Vous recherchez un espace ' ', mais la question concerne les espaces blancs en général, y compris "\n", "\t"et les autres caractères non imprimables qui correspondent dans l'expression régulière par /\s/.
amenthes

alors vous pouvez éditer la condition if comme "if (" \ t \ r \ n ".indexOf (k [0])> - 1)" toujours ça marche, ce sont déjà certains types.
mguven guven
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.