.trim () no JavaScript não funciona no IE


460

Tentei aplicar .trim()a uma string em um dos meus programas JavaScript. Está funcionando bem no Mozilla, mas um erro é exibido quando o tento no IE8. Alguém sabe o que está acontecendo aqui? Existe alguma maneira de fazê-lo funcionar no IE?

código:

var ID = document.getElementByID('rep_id').value.trim();

exibição de erro:

Mensagem: O objeto não suporta esta propriedade ou método
Linha: 604
Char: 2
Código: 0
URI: http: //test.localhost/test.js

2
Não consigo ver o que está armazenado no seu computador. Você pode carregar o test.js em um site de armazenamento? Além disso, preciso ver a função trim () real para ver o que está errado. Obrigado!
— Warty

6
@ItzWarty "whatever ".trim()tente isso no IE8.
— Dan Rosenstark


8
Pesquisei no Google a compatibilidade com o IE8 trim()e não acreditei nos meus olhos quando descobri que não havia suporte. Obrigado por esclarecer isso. Eu ia perguntar o mesmo que você pediu.
— Mathias Lykkegaard Lorenzen

Respostas:


773

Adicione o código a seguir para adicionar a funcionalidade de apara à string.

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

8
Boa resposta. Note-se que replace(/^\s\s*/, '').replace(/\s\s*$/, '')deve ser cerca de 3 vezes mais rápido do que replace(/^\s+|\s+$/, '')no Firefox 2, de acordo com um ponto de referência: blog.stevenlevithan.com/archives/faster-trim-javascript
— Daniel Vassallo

92
Observe também que replace(/^\s+|\s+$/, '')apenas remove os espaços iniciais ou finais, que não é o comportamento esperado de uma função de recorte. Se você deseja remover os espaços à esquerda e à direita, precisa usar replace(/^\s+|\s+$/g, '').
— Massimiliano Fliri

1
Parece um pouco bobo para mim. Toda estrutura js não fornece uma função util trim ()? Se esse é o único problema que você tem, tudo bem, mas há muitas maneiras pelas quais o IE é "diferente" que fará com que uma biblioteca valha a pena no curto prazo.
— Stephen

6
@ Stephen Sim, você está correto, mas a questão não é sobre estruturas. é sobre javascript e trim.
— Ben Rowe

3
Esta é uma boa solução se você não usar o jQuery. Mas se não, $ .trim () parece ser uma solução muito melhor, pois mantém seu script um pouco mais simples.
— NLemay

203

Parece que essa função não está implementada no IE. Se você estiver usando jQuery, poderá usar $.trim()( http://api.jquery.com/jQuery.trim/ ).


17
Agora, eu amo jQuery, mas importá-lo apenas para .trim () parece um exagero
— Erik

71
Concordo. É por isso que eu disse "se você estiver usando jQuery ..." =)
— jrummell

@ Erik, esse será o único problema do IE que o Jin vai encontrar? Não há muito javascript útil que eu possa escrever sem precisar usar as funções de limpeza de navegador de uma biblioteca.
— Stephen

8
Observe que $ .trim () é diff de $ (<element> .val (). Trim () - mais informações aqui: stackoverflow.com/questions/4315570/…
— sami

57

jQuery:

$.trim( $("#mycomment").val() );

Alguém usa, $("#mycomment").val().trim();mas isso não funciona no IE.


1
Obrigado por uma resposta perfeita, que nos salvou muitas dores de cabeça aqui neste podre instável velho navegador-Bridge :)
— Awerealis

1
Um ótimo exemplo de por que o jQuery.
— Andrew Plummer

Esse método é cross browser, senhor?
— toha

2
@toha, sendo cross browser é uma das principais coisas sobre jQuery
— Raystorm

Senhor correto. Eu acho. Obrigado
— toha

34

Infelizmente, não há suporte a JavaScript entre navegadores para trim ().

Se você não estiver usando jQuery (que possui um método .trim ()), poderá usar os seguintes métodos para adicionar suporte a aparar as strings:

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


8

Eu tive um problema semelhante ao tentar aparar um valor de uma entrada e depois perguntar se era igual a nada:

if ($(this).val().trim() == "")

No entanto, isso lançou uma chave nos trabalhos para o IE6 - 8. Irritantemente, eu tentei varrer da seguinte maneira:

   var originalValue = $(this).val();

No entanto, usando o método de corte do jQuery, funciona perfeitamente para mim em todos os navegadores.

var originalValueTrimmed = $.trim($(this).val());              
            if (originalValueTrimmed  == "") { ... }

5

Eu escrevi algum código para implementar a funcionalidade de apara.

LTRIM (corte à esquerda):

function ltrim(s)
{
    var l=0;
    while(l < s.length && s[l] == ' ')
    {   l++; }
    return s.substring(l, s.length);
} 

RTRIM (corte à direita):

function rtrim(s)
{
    var r=s.length -1;
    while(r > 0 && s[r] == ' ')
    {   r-=1;   }
    return s.substring(0, r+1);
 }

TRIM (apara ambos os lados):

function trim(s)
{
    return rtrim(ltrim(s));
}

OU

Expressão regular também está disponível, que podemos usar.

function trimStr(str) {
  return str.replace(/^\s+|\s+$/g, '');
}

Explicação útil


3
Procurar sua antiga escola e destruir código não manipula \t, \r, \ne tal. Só spaces. O Regexp é melhor se você não estiver realmente se esforçando para lidar com tudo manualmente.
— CodeAngry

4

Podemos obter o código oficial da internet! Consulte isto:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim

A execução do código a seguir antes de qualquer outro código criará trim () se não estiver disponível nativamente.

if (!String.prototype.trim) {
  (function() {
    // Make sure we trim BOM and NBSP
    var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
    String.prototype.trim = function() {
      return this.replace(rtrim, '');
    };
  })();
}

para saber mais: Acabei de descobrir que existe um projeto js para oferecer suporte ao EcmaScript 5: https://github.com/es-shims/es5-shim lendo o código-fonte; podemos obter mais conhecimento sobre o trim.

defineProperties(StringPrototype, {
 // http://blog.stevenlevithan.com/archives/faster-trim-javascript
 // http://perfectionkills.com/whitespace-deviations/
  trim: function trim() {
    if (typeof this === 'undefined' || this === null) {
      throw new TypeError("can't convert " + this + ' to object');
    }
    return String(this).replace(trimBeginRegexp, '').replace(trimEndRegexp, '');
  }
}, hasTrimWhitespaceBug);

3

Eu não acho que exista um trim()método nativo no padrão JavaScript. Talvez a Mozilla forneça um, mas se você quiser um no IE, precisará escrevê-lo. Existem algumas versões nesta página .


3

Eu tive o mesmo problema no IE9 No entanto, quando declarei a versão html suportada, com a seguinte tag na primeira linha antes do

<!DOCTYPE html>
<HTML>
<HEAD>...
.
.

O problema foi resolvido.


1

Isso ocorre devido ao erro de digitação getElementBy ID . Altere para getElementById


0
var res = function(str){
    var ob; var oe;
    for(var i = 0; i < str.length; i++){
        if(str.charAt(i) != " " && ob == undefined){ob = i;}
        if(str.charAt(i) != " "){oe = i;}
    }
    return str.substring(ob,oe+1);
}

1
Por que fazer um loop quando você pode usar uma substituição simples, também é muito ruim quando o tempo é crucial, tente chamar esse método 200 vezes em tamanho médio de texto e chamar a outra implementação fornecida pelo jQuery e você verá o que estou falando: )
— Dany Khalife

1
Porque, em alguns casos, um loop é mais rápido que um regexp. Veja o link que JW postou em sua resposta para obter alguns benchmarks, especialmente os comentários (já que o benchmark original é bastante antigo).
— Eric

0

Acabei de descobrir que o IE para de dar suporte trim(), provavelmente após uma atualização recente do Windows. Se você usa dojo, pode usar dojo.string.trim(), ele funciona em várias plataformas.


0

Esse problema pode ser causado pelo IE usando o modo de compatibilidade em sites da intranet. Há duas maneiras de resolver isso: você pode atualizar o IE para não usar o modo de compatibilidade em sua máquina local (no IE11: Ferramentas-> Configurações do modo de compatibilidade -> desmarque Exibir sites da intranet no modo de compatibilidade)

Melhor ainda, você pode atualizar as metatags na sua página da web. Adicionar em:

...
<head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
...

O que isto significa? Está dizendo ao IE para usar o modo de compatibilidade mais recente. Mais informações estão disponíveis no MSDN: Especificando modos de documento herdados

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.