Recortar espacios desde el inicio y el final de la cadena


152

Estoy tratando de encontrar una forma de recortar espacios desde el principio y el final de la cadena de título. Estaba usando esto, pero no parece estar funcionando:

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

¿Algunas ideas?


1
var s = '1'; s = s.replace (/ ^ \ s + | \ s + $ / g, ''); alerta ('-' + s + '-'); // funciona así, no necesitas los parens ni los corchetes.
Ekerner

2
Javascript se ha .trimincorporado ahora, así que esta es la respuesta para los navegadores modernos: stackoverflow.com/a/3000900/29182
Ziggy


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

Respuestas:


216

Nota: A partir de 2015, todos los principales navegadores (incluido IE> = 9) admiten String.prototype.trim () . Esto significa que para la mayoría de los casos de uso, simplemente hacer str.trim()es la mejor manera de lograr lo que la pregunta plantea.


Steven Levithan analizó muchas implementaciones diferentes de trimJavascript en términos de rendimiento.

Su recomendación es:

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

para "implementación de propósito general que es rápido entre navegadores", y

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 desea manejar cadenas largas excepcionalmente rápido en todos los navegadores".

Referencias


21
Los nuevos Safari (5), Chrome (5), Firefox (3.6) y Opera (10.5) son compatibles con un método de recorte de cadena nativo. Siendo ese el caso, asignaría un método a String.prototype, si no existe, en lugar de una nueva función global.
kennebec

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

3
Dudo que después de las recientes mejoras en el rendimiento de JavaScript, esta prueba siga siendo relevante o confiable como lo fue en el momento de esta respuesta.
Eduardo

2
¿Por qué estás usando caracteres blancos dobles? alias por qué esta expresión regular /^\s\s*/y no esta/^\s*/
aemonge

¿Por qué trim1y trim11?
Marty Cortez

68

Si usar jQuery es una opción:

/**
 * 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()));
});

o simplemente:

$.trim(string);

48

Como @ChaosPandion mencionó, el String.prototype.trimmétodo se ha introducido en la especificación ECMAScript 5th Edition , algunas implementaciones ya incluyen este método, por lo que la mejor manera es detectar la implementación nativa y declararla solo si no está disponible:

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

Entonces puedes simplemente:

title = title.trim();

1
Siempre me sorprende un poco este meme de verificar si la propiedad es una función. Si no es una función, ¿es realmente el comportamiento correcto sobrescribirla? Quizás deberías arrojar un error en ese caso.
kojiro

1
@kojiro, bueno, tal vez arrojar un error sería bueno, pero lo veo así: estoy tratando de hacer una cuña que cumpla con las especificaciones , y si String.prototype.trimno es una función, no es el String.prototype.trimmétodo descrito en la 5ta edición de ECMAScript Especificación, la especificación garantiza que trimes un objeto de función en entornos ES5.
CMS

77
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

Sé que esta es una publicación antigua, pero pensé que compartiría nuestra solución. En la búsqueda del código más corto (no todo el mundo ama la expresión regular breve), uno podría usar:

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

Por cierto: ejecuté esta misma prueba a través del enlace compartido anteriormente blog.stevenlevithan.com - Ajuste de JavaScript más rápido y este patrón superó a todas las demás MANOS!

Usando IE8, prueba agregada como prueba13. Los resultados fueron:

Longitud original: 226002
trim1: 110ms (largo: 225994) trim2
: 79ms (largo: 225994)
trim3: 172ms (largo: 225994)
trim4: 203ms (largo: 225994)
trim5: 172ms (largo: 225994)
trim6: 312ms (largo: 225994)
trim7: 203ms (largo: 225994)
trim8: 47ms (largo: 225994)
trim9: 453ms (largo: 225994)
trim10: 15ms (largo: 225994)
trim11: 16ms (largo: 225994)
trim12: 31ms (largo: 225994)
trim13: 0ms (longitud: 226002)



11

Aquí, esto debería hacer todo lo que necesitas

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 * parece redundante, ya que hay \ s +, pero es un poco más rápido
CaffGeek

4

Aquí hay algunos métodos que he usado en el pasado para recortar cadenas en 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);
}

RegExp ^[\s*]+coincide *al comienzo de la cadena, de modo que su función se ajuste "*** Foo"a "Foo".
Ferdinand Beyer

probablemente :) me pregunto por qué nadie se ha quejado ... Hace mucho tiempo escribí ese código, y se usa en en.wikipedia.org/wiki/Wikipedia:Twinkle . fuera de la fuente ahora que lo señala es obvio.
azatoth

4

Aquí está mi código actual, la segunda línea funciona si comento la tercera línea, pero no funciona si la dejo como está.

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, '-');

elimine la segunda y tercera línea y use el código de polygenelubricants, page_title = trim1 (page_title);
hormiga

así que, en última instancia, ¿está tratando de limpiar esta cadena para que se recorte, alfanumérica y guiones en lugar de espacios como separadores?
CaffGeek

@ Chad sí. Para crear URL de slug sobre la marcha para que los usuarios puedan ver cómo se verá su URL. Similar a cómo WordPress lo hace al crear nuevas publicaciones de blog.
James Jeffery


2

jQuery.trim ("hola, ¿cómo estás?");

:)


2
Parece que estás haciendo un chiste, pero ten en cuenta que las personas que leen este comentario podrían verse tentadas a usar tu solución y seguir adelante.
Commadelimitado

$ .trim ("blabh blah blah"); devuelve correctamente "blabh blah blah"
RAYO

2

Cuando el DOM está completamente cargado, puede agregar esto a todos los campos de texto. Nunca he tenido una situación en la que necesitara enviar espacios iniciales o finales, por lo que hacerlo todo el tiempo a nivel mundial me ha funcionado ...

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

requiere jQuery. Otra pregunta (no lo probé): ¿ blurocurre realmente antes del envío cuando estoy en un campo y presiono <kbd> enter </kbd> para enviar un formulario?
Amenthes

2

Esto es lo que sugiere JavaScript Architect / Guru Douglas Crockford.

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

Nota: debe definir "método" para Function.prototype.

Alternativamente

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

title.trim();    // returns trimmed title

Observación

En los navegadores recientes, el método de recorte se incluye de manera predeterminada. Por lo tanto, no tiene que agregarlo explícitamente.

Los principales navegadores Chrome, Firefox, Safari, etc. admiten el método de recorte . Comprobado en 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 intento recursivo para esto

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;
    }
}

llama así:

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

si desea filtrar caracteres específicos, puede definir una cadena de lista básicamente:

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;
    }
}

¡Hay una sutil diferencia de lo que se pregunta! Estás mirando por un espacio ' ', pero la pregunta es sobre el espacio en blanco en general, incluyendo "\n", "\t"y otros caracteres no imprimibles que coinciden en expresiones regulares por /\s/.
Amenthes

entonces puede editar si la condición como "if (" \ t \ r \ n ".indexOf (k [0])> - 1)" aún funciona, esos son ciertos tipos ya.
mguven guven
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.