.trim () в JavaScript не работает в IE


460

Я пытался подать заявку .trim() к строке в одной из моих программ JavaScript. Он работает нормально под Mozilla, но появляется ошибка, когда я пытаюсь сделать это в IE8. Кто-нибудь знает, что здесь происходит? Есть ли в любом случае я могу заставить его работать в IE?

код:

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

отображение ошибки:

Сообщение: объект не поддерживает это свойство или метод
Линия: 604
Char: 2
Код: 0
URI: http: //test.localhost/test.js

2
Я не вижу, что хранится на вашем компьютере. Не могли бы вы загрузить test.js на сайт хранилища? Кроме того, мне нужно увидеть фактическую функцию trim (), чтобы увидеть, что не так. Спасибо!
Warty

6
@ItzWarty "whatever ".trim()попробуйте это на IE8.
Дэн Розенстарк


8
Я гуглил на предмет совместимости с IE8 trim()и не поверил своим глазам, когда понял, что это не поддерживается. Спасибо за очистку этого. Я собирался спросить так же, как вы просили.
Матиас Ликкегор Лоренцен

Ответы:


773

Добавьте следующий код, чтобы добавить функциональность обрезки в строку.

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

8
Хороший ответ. Обратите внимание, что это replace(/^\s\s*/, '').replace(/\s\s*$/, '')должно быть примерно в 3 раза быстрее, чем replace(/^\s+|\s+$/, '')в Firefox 2, согласно одному тесту
Даниэль Вассалло

92
Также обратите внимание, что replace(/^\s+|\s+$/, '')удаляются только начальные или конечные пробелы, что не соответствует поведению, ожидаемому от функции усечения. Если вы хотите удалить как начальные, так и конечные пробелы, вам нужно использовать replace(/^\s+|\s+$/g, '').
Массимилиано Флири

1
Мне немного глупо. Разве каждый js framework не предоставляет функцию trim () Если это единственная проблема, которая у вас есть, тогда хорошо, но есть много способов, которыми IE «отличается», что сделает библиотеку полезной в краткосрочной перспективе.
Стивен

6
@ Stefhen Да, вы правы, но вопрос не в фреймворках. это о JavaScript и отделке.
Бен Роу

3
Это хорошее решение, если вы не используете jQuery. Но если нет, то $ .trim () кажется гораздо лучшим решением, поскольку он делает ваш скрипт немного проще.
NLemay

203

Похоже, что эта функция не реализована в IE. Если вы используете jQuery, вы можете использовать $.trim()вместо этого ( http://api.jquery.com/jQuery.trim/ ).


17
Теперь я люблю jQuery, но импортировать его только для .trim () кажется излишним
Эрик

71
Согласен. Вот почему я сказал "если вы используете jQuery ..." =)
jrummell

@ Эрик, это единственная проблема IE, с которой столкнется Джин? Там не так много полезного JavaScript, который я могу написать без использования функций очистки браузера библиотеки.
Стивен

8
Обратите внимание, что $ .trim () отличается от $ (<element> .val (). Trim () - более подробная информация здесь: stackoverflow.com/questions/4315570/…
sami

57

JQuery:

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

Кто-то использует, $("#mycomment").val().trim();но это не будет работать на IE.


1
Спасибо за прекрасный ответ, который избавил нас от многих головных болей на этом гнилом шатком старом Браузер-Бридж :)
Awerealis

1
Отличный пример того, почему jQuery.
Эндрю Пламмер

Это кросс-браузерный метод, сэр?
Тоха

2
@toha, быть кросс-браузерным - это одна из ключевых особенностей jQuery
Raystorm,

Поправьте, сэр. Я полагаю. Спасибо
Тоха

34

К сожалению, нет кросс-браузерной поддержки JavaScript для trim ().

Если вы не используете jQuery (у которого есть метод .trim ()), вы можете использовать следующие методы для добавления поддержки обрезки строк:

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

У меня была похожая проблема при попытке обрезать значение на входе, а затем спросить, было ли оно равно нулю:

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

Однако это бросило гаечный ключ в работах для IE6 - 8. Достаточно досадно, но я попытался изменить это так:

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

Тем не менее, используя метод обрезки JQuery, отлично работает для меня во всех браузерах ..

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

5

Я написал некоторый код для реализации функциональности обрезки.

LTRIM (отделка слева):

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

RTRIM (обрезка справа):

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

TRIM (обрезать обе стороны):

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

ИЛИ

Также доступно регулярное выражение, которое мы можем использовать.

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

Полезное объяснение


3
Ваша старая школа поиска и уничтожения код не обрабатывает \t, \r, \nи тому подобное. Только spaces. Регулярное выражение лучше, если вам не хочется прикладывать усилия, чтобы справиться со всем вручную.
CodeAngry

4

Мы можем получить официальный код из Интернета! Порекомендуйте это:

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

Выполнение следующего кода перед любым другим кодом создаст trim (), если он не доступен изначально.

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

для большего: я только что обнаружил, что есть проект js для поддержки EcmaScript 5: https://github.com/es-shims/es5-shim , читая исходный код, мы можем получить больше знаний о 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

Я не думаю, что есть trim()стандартный метод в стандарте JavaScript. Может быть, Mozilla поставляет один, но если вы хотите один в IE, вам нужно написать его самостоятельно. На этой странице есть несколько версий .


3

У меня была та же проблема в IE9 Однако, когда я объявил поддерживаемую версию HTML со следующим тегом в первой строке перед

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

Проблема была решена.


1

Это из-за ошибки опечатки getElementBy ID . Измените его на 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
Зачем делать цикл, когда вы можете использовать простую замену, а также очень плохо, когда время очень важно, попробуйте вызвать этот метод 200 раз для текста среднего размера и вызвать другую реализацию, предоставленную jQuery, и вы поймете, о чем я говорю: )
Дани Халифе

1
Потому что в некоторых случаях цикл быстрее, чем регулярное выражение. Посмотрите ссылку, которую JW разместил в своем ответе, для некоторых тестов, особенно комментариев (поскольку исходный тест довольно старый).
Эрик

0

Просто обнаружил, что IE перестает поддерживать trim(), вероятно, после недавнего обновления Windows. Если вы используете Dojo, вы можете использовать dojo.string.trim(), он работает кроссплатформенно.


0

Эта проблема может быть вызвана тем, что IE использует режим совместимости на сайтах интрасети. Есть два способа решения этой проблемы: вы можете либо обновить IE, чтобы не использовать режим совместимости на локальном компьютере (в IE11: Инструменты-> Настройки просмотра совместимости -> Снимите флажок Отображать сайты интрасети в представлении совместимости)

А еще лучше, вы можете обновить мета-теги на своей веб-странице. Добавить в:

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

Что это значит? Это говорит IE, чтобы использовать последний режим совместимости. Более подробная информация доступна в MSDN: Указание устаревших режимов документов

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.