.trim () en JavaScript no funciona en IE


460

Traté de aplicar .trim()a una cadena en uno de mis programas de JavaScript. Funciona bien en Mozilla, pero aparece un error cuando lo intento en IE8. ¿Alguien sabe qué está pasando aquí? ¿Hay alguna forma de hacerlo funcionar en IE?

código:

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

pantalla de error:

Mensaje: el objeto no admite esta propiedad o método
Línea: 604
Char: 2
Código: 0
URI: http: //test.localhost/test.js

2
No puedo ver lo que está almacenado en su computadora. ¿Podría subir test.js a un sitio web de almacenamiento? Además, necesito ver la función trim () real para ver qué está mal. ¡Gracias!
Warty

66
@ItzWarty "whatever ".trim()prueba eso en IE8.
Dan Rosenstark


8
Busqué en Google la compatibilidad con IE8 trim()y no me creería lo que veía cuando descubrí que no era compatible. Gracias por aclarar eso. Iba a preguntar lo mismo que tú pediste.
Mathias Lykkegaard Lorenzen

Respuestas:


773

Agregue el siguiente código para agregar la funcionalidad de recorte a la cadena.

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

8
Buena respuesta. Tenga en cuenta que replace(/^\s\s*/, '').replace(/\s\s*$/, '')debería ser aproximadamente 3 veces más rápido que replace(/^\s+|\s+$/, '')en Firefox 2, según un punto de referencia: blog.stevenlevithan.com/archives/faster-trim-javascript
Daniel Vassallo

92
Tenga en cuenta también que replace(/^\s+|\s+$/, '')solo elimina los espacios iniciales o finales, que no es el comportamiento esperado de una función de recorte. Si desea eliminar los espacios iniciales y finales, debe utilizarlos replace(/^\s+|\s+$/g, '').
Massimiliano Fliri

1
Me parece un poco tonto. ¿No cada framework js proporciona una función de utilidad trim ()? Si este es el único problema que tiene, entonces está bien, pero hay muchas maneras en que IE es "diferente" que hará que una biblioteca valga la pena a corto plazo.
Stephen

66
@Stephen Sí, tienes razón, pero la pregunta no se trata de marcos. se trata de javascript y trim.
Ben Rowe

3
Esta es una buena solución si no usa jQuery. Pero si no, $ .trim () parece ser una solución mucho mejor, ya que mantiene su script un poco más simple.
NLemay

203

Parece que esa función no está implementada en IE. Si está utilizando jQuery, puede utilizarlo $.trim()en su lugar ( http://api.jquery.com/jQuery.trim/ ).


17
Ahora, amo jQuery, pero importarlo solo para .trim () parece excesivo
Erik

71
Estoy de acuerdo. Es por eso que dije "si estás usando jQuery ..." =)
jrummell

@Erik, ¿será este el único problema de IE con el que se encontrará Jin? No hay muchos javascript útiles que pueda escribir sin tener que usar las funciones de desinfección del navegador de una biblioteca.
Stephen

8
Tenga en cuenta que $ .trim () es diferente de $ (<elemento> .val (). Trim () - más información aquí: stackoverflow.com/questions/4315570/…
sami

57

jQuery:

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

Alguien usa $("#mycomment").val().trim(); pero esto no funcionará en IE.


1
Gracias por una respuesta perfecta que nos ha ahorrado muchos dolores de cabeza aquí en este viejo puente de navegador podrido y tembloroso :)
Awerealis

1
Un gran ejemplo de por qué jQuery.
Andrew Plummer

¿Es ese método un navegador cruzado, señor?
toha

2
@toha, ser un navegador cruzado es una de las cosas clave sobre jQuery
Raystorm

Corregir señor. Supongo. Gracias
toha

34

Lamentablemente, no hay compatibilidad JavaScript entre navegadores para trim ().

Si no está utilizando jQuery (que tiene un método .trim ()) puede usar los siguientes métodos para agregar soporte de recorte a las cadenas:

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

Tuve un problema similar al intentar recortar un valor de una entrada y luego preguntar si era igual a nada:

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

Sin embargo, esto arrojó una llave en las obras para IE6 - 8. Lo suficientemente molesto que había intentado variar así:

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

Sin embargo, el uso del método de recorte de jQuery funciona perfectamente para mí en todos los navegadores.

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

5

He escrito un código para implementar la funcionalidad de recorte.

LTRIM (recorte a la izquierda):

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

RTRIM (recorte a la derecha):

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

RECORTAR (recortar ambos lados):

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

O

También está disponible la expresión regular que podemos usar.

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

Explicación útil


3
Búsqueda Tu vieja escuela y destruir el código no maneja \t, \r, \ny tal. Sólo spaces. Regexp es mejor si no te apetece realmente esforzarte para manejar todo manualmente.
CodeAngry

4

¡Podemos obtener el código oficial de Internet! Consulte esto:

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

Ejecutar el siguiente código antes de cualquier otro código creará trim () si no está disponible de forma nativa.

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 más información: acabo de encontrar que hay un proyecto js para admitir EcmaScript 5: https://github.com/es-shims/es5-shim al leer el código fuente, podemos obtener más conocimiento sobre el recorte.

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

No creo que haya un trim()método nativo en el estándar de JavaScript. Tal vez Mozilla suministre uno, pero si desea uno en IE, deberá escribirlo usted mismo. Hay algunas versiones en esta página .


3

Tuve el mismo problema en IE9 Sin embargo, cuando declaró la versión html compatible con la siguiente etiqueta en la primera línea antes del

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

El problema fue resuelto.


1

Esto se debe al error tipográfico getElementBy ID . Cámbielo a 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 qué hacer un bucle cuando puede usar un reemplazo simple? También es muy malo cuando el tiempo es crucial, intente llamar a este método 200 veces en un texto de tamaño promedio y llame a la otra implementación proporcionada por jQuery y verá de lo que estoy hablando: )
Dany Khalife

1
Porque en algunos casos un ciclo es más rápido que una expresión regular. Vea el enlace que JW publicó en su respuesta para algunos puntos de referencia, especialmente los comentarios allí (ya que el punto de referencia original es bastante antiguo).
Eric

0

Me acabo de enterar de que IE deja de ser compatible trim(), probablemente después de una actualización reciente de Windows. Si usa dojo, puede usar dojo.string.trim(), funciona multiplataforma.


0

Este problema puede deberse a que IE usa el modo de compatibilidad en sitios de intranet. Hay dos formas de resolver esto, puede actualizar IE para que no use el modo de compatibilidad en su máquina local (en IE11: Herramientas-> Configuración de Vista de compatibilidad -> Desmarque Mostrar sitios de intranet en Vista de compatibilidad)

Mejor aún, puede actualizar las metaetiquetas en su página web. Añadir:

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

¿Qué significa esto? Le dice a IE que use el último modo de compatibilidad. Hay más información disponible en MSDN: Especificación de modos de documentos heredados

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.