Aparar espaços do início e do fim da string

152

Estou tentando encontrar uma maneira de aparar espaços do início e do fim da sequência de título. Eu estava usando isso, mas não parece estar funcionando:

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

Alguma ideia?

James Jeffery
fonte
1
var s = '1'; s = s.replace (/ ^ \ s + | \ s + $ / g, ''); alerta ('-' + s + '-'); // funciona assim, você não precisa de parênteses ou colchetes.
ekerner
2
O Javascript foi .trimincorporado agora, então esta é a resposta para os 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

Respostas:

216

Nota: A partir de 2015, todos os principais navegadores (incluindo IE> = 9) suportam String.prototype.trim () . Isso significa que, na maioria dos casos de uso, simplesmente fazer str.trim()é a melhor maneira de alcançar o que a pergunta faz.


Steven Levithan analisou muitas implementações diferentes do trimJavascript em termos de desempenho.

Sua recomendação é:

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

para "implementação de uso geral rápida entre navegadores" e

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

"se você quiser lidar com seqüências longas excepcionalmente rápidas em todos os navegadores".

Referências

poligenelubricants
fonte
21
O novo Safari (5), Chrome (5), Firefox (3.6) e Opera (10.5) oferecem suporte a um método de corte String nativo. Sendo esse o caso, eu atribuiria um método ao String.prototype, se ele não existir, em vez de uma nova função global.
kennebec
14
String.prototype.trim = String.prototype.trim || function trim() { return this.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); };
Kojiro #
3
Duvido que, após melhorias recentes no desempenho do javascript, esse teste ainda seja relevante ou confiável, como era no momento desta resposta.
Eduardo
2
por que você está usando caracteres brancos duplos? aka porque este regex /^\s\s*/e não este/^\s*/
aemonge 15/09
Por que trim1e trim11?
28878 Marty Cortez
68

Se o uso do jQuery for uma opção:

/**
 * 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 simplesmente:

$.trim(string);
Pedra
fonte
48

Como o @ChaosPandion mencionou, o String.prototype.trimmétodo foi introduzido na especificação do ECMAScript 5th Edition , algumas implementações já incluem esse método, portanto, a melhor maneira é detectar a implementação nativa e declará-la apenas se não estiver disponível:

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

Então você pode simplesmente:

title = title.trim();
CMS
fonte
1
Fico sempre um pouco confuso com esse meme de verificar se a propriedade é uma função. Se não é uma função, o comportamento correto é realmente substituí-lo? Talvez você deva lançar um erro nesse caso.
Kojiro # 27/11
1
@kojiro, bem, talvez seja bom lançar um erro, mas vejo o seguinte: estou tentando fazer um calço compatível com as especificações e , se String.prototype.trimnão for uma função, não é o String.prototype.trimmétodo descrito na ECMAScript 5th Edition Especificação, a especificação garante que trimé um objeto de função nos ambientes 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 # 30/11
34

Sei que este é um post antigo, mas pensei em compartilhar nossa solução. Na busca pelo código mais curto (nem todo mundo adora regex conciso), pode-se usar:

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

BTW: Eu executei esse mesmo teste através do link compartilhado acima blog.stevenlevithan.com - Ajuste de JavaScript mais rápido e esse padrão superou todas as outras MÃOS!

Usando o IE8, teste adicionado como teste13. Os resultados foram:

Comprimento original: 226002
guarnição1: 110ms (comprimento: 225994)
guarnição2: 79ms (comprimento: 225994)
guarnição3: 172ms (comprimento: 225994)
guarnição4: 203ms (comprimento: 225994)
guarnição5: 172ms (comprimento: 225994)
guarnição6: 312ms (comprimento: 225994)
guarnição7: 203ms (comprimento: 225994)
guarnição8: 47ms (comprimento: 225994)
guarnição9: 453ms (comprimento: 225994)
guarnição10: 15ms (comprimento: 225994)
guarnição11: 16ms (comprimento: 225994)
guarnição12: 31ms (comprimento: 225994)
trim13: 0ms (comprimento: 226002)

user590028
fonte
11

O ECMAScript 5 suporta trime isso foi implementado no Firefox.

trim - MDC

ChaosPandion
fonte
11

Aqui, isso deve fazer tudo o que você precisa

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   "));
CaffGeek
fonte
\ s \ s * parece redundante, uma vez que existe \ s +, mas é um pouco mais rápido
CaffGeek
4

Aqui estão alguns métodos que eu tenho usado no passado para aparar cadeias de caracteres em 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);
}
azatoth
fonte
O RegExp ^[\s*]+corresponde *ao início da cadeia, de modo que suas guarnições de função "*** Foo"para "Foo".
Ferdinand Beyer
provavelmente :) me pergunto por que ninguém reclamou ... Há muito tempo atrás eu escrevi esse código, e ele é usado em en.wikipedia.org/wiki/Wikipedia:Twinkle . fora da fonte agora que você apontou, é óbvio.
azatoth
4

Aqui está o meu código atual: a 2ª linha funciona se eu comentar a 3ª linha, mas não funciona se eu deixar 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, '-');
James Jeffery
fonte
remova a segunda e a terceira linha e use o código dos poligenelubricants, page_title = trim1 (page_title);
formiga
então, em última análise, você está tentando limpar essa string para ser aparada, alfanumérica e hífen em vez de espaços como separadores?
CaffGeek
@chad yes. Para criar URLs slug em tempo real, para que os usuários possam ver como será o URL deles. Semelhante a como o wordpress faz isso ao criar novas postagens no blog.
James Jeffery
2

jQuery.trim ("olá, como vai você?");

:)

Fantasma
fonte
2
Parece que você está fazendo graça, mas lembre-se de que as pessoas que estão lendo este comentário podem ficar tentadas a usar sua solução e seguir adiante.
commadelimited
$ .trim ("blá blá blá"); retorna corretamente "blá blá blá"
RAY
2

Quando o DOM estiver totalmente carregado, você poderá adicioná-lo a todos os campos de texto. Eu nunca tive uma situação em que precisava enviar espaço à esquerda ou à direita, por isso fazê-lo o tempo todo em todo o mundo funcionou para mim ...

$(function() { $('input[type=text]').on('blur', function(){
    $(this).val($.trim($(this).val()));
  });
});
Mark Swardstrom
fonte
requer jQuery. Outra pergunta (eu não testei): blurrealmente ocorre antes do envio quando estou em um campo e pressione <kbd> enter </kbd> para enviar um formulário?
amenthes
2

É o que sugere o arquiteto JavaScript / Guru Douglas Crockford.

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

Nota: você precisa definir "método" para Function.prototype.

alternativamente

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

title.trim();    // returns trimmed title

Observação

Em navegadores recentes, o corte método de é incluído por padrão. Portanto, você não precisa adicioná-lo explicitamente.

Os principais navegadores Chrome, Firefox, Safari etc. suportam o método de apara . Verificado no Chrome 55.0.2883.95 (64 bits), Firefox 51.0.1 (64 bits), Safari 10.0 (12602.1.50.0.10).

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

var x = $.trim(word);

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

uma tentativa recursiva para isso

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

chame assim:

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

Se você deseja filtrar caracteres específicos, pode definir uma string de lista basicamente:

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;
    }
}
Mguven Guven
fonte
Há uma diferença sutil do que está sendo perguntado! Você está procurando um espaço ' ', mas a pergunta é sobre espaço em branco em geral, incluindo "\n", "\t"e outros caracteres não imprimíveis que correspondem à expressão regular por /\s/.
Amenthes
então você pode editar se a condição como "if (" \ t \ r \ n ".indexOf (k [0])> - 1)" ainda funciona, esses já são alguns tipos.
mguven guven