Подстрока Javascript и indexOf не работают в IE9

У меня есть этот Javascript здесь:

function getTxt(obj) {
var first = obj.innerHTML.substring(0, obj.innerHTML.indexOf('<span class=\"item2\">'));
var second = obj.innerHTML.substring(obj.innerHTML.indexOf('<span class=\"item2\">'));
var f = first.replace(/(<([^>]+)>)/ig,'');
var s = second.replace(/(<([^>]+)>)/ig,'');
alert(first + "\n" + second + "\n" + f + "\n" + s);
}

и HTML:

<span class="item" onclick="getTxt(this)"><span class="item1">MyName</span><span class="item2">555-555-5555</span></span>

В большинстве браузеров (FireFox, Chrome, Safari, Opera) выдается предупреждение:

<span class="item1">MyName</span>
<span class="item2">555-555-5555</span>
MyName
555-555-5555

как и ожидалось. Однако в IE9 он предупреждает:

<span class="item1">MyName</span><span class="item2">555-555-5555</span>

MyName555-555-5555

Таким образом, он объединяет переменные «first» и «second» в переменную «first», а «f» и «s» вместе — в переменную «f».

Я хотел бы знать, можно ли каким-либо образом исправить это для IE9 (и, возможно, для другой версии IE), чтобы он работал так же, как и в других браузерах.


javascript substring indexof internet-explorer-9
person Tomjr260    schedule 17.07.2012    source источник
comment
Разве это не должно быть obj.innerHTML.indexOf("<span class=\"item2\">") вместо obj.innerHTML.indexOf('<span class=\"item2\">') обратите внимание на двойные кавычки вместо одинарных   -  person Musa    schedule 18.07.2012

Ответы (2)


arrow_upward
4
arrow_downward

Сопоставление с образцом innerHTML особенно проблематично в IE и, как правило, является плохой идеей. IE часто НЕ возвращает вам тот же HTML, который изначально был на странице. Он часто перецитирует или удаляет кавычки, меняет порядок атрибутов, меняет регистр и т. д. IE явно восстанавливает HTML, а не возвращает вам то, что было изначально на странице. Таким образом, вы не можете надежно сопоставлять шаблоны innerHTML в IE. Есть некоторые конкретные вещи, которые вы, вероятно, можете сопоставить (начало тегов), но вы не можете ожидать, что атрибуты будут находиться в определенном месте или иметь определенный формат.

Если вы console.log(obj.innerHTML) работаете в IE, вы, скорее всего, поймете, о чем я говорю. Это будет выглядеть иначе.

Более надежное решение — использовать функции DOM для навигации по определенным элементам или селекторы CSS для поиска определенных объектов, а затем изменять атрибуты или innerHTML для одного определенного элемента. Позвольте навигации DOM найти для вас правильный элемент, а не анализировать HTML самостоятельно.

Если вы предоставите желаемый образец HTML до и после и опишите, чего вы пытаетесь достичь, люди здесь, вероятно, могут помочь вам выполнить работу с манипуляцией DOM, а не синтаксическим анализом HTML.

Я не знаю, какие библиотеки селекторов у вас есть или на какие браузеры вы ориентируетесь, но в jQuery вы можете сделать это так:

function getText(obj) {
    return $(obj).find(".item1").text();
}

В простом javascript, в IE8 и выше и во всех других современных браузерах вы можете использовать это:

function getText(obj) {
    return obj.querySelectorAll(".item1").innerHTML;
}

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

function getText(obj) {
    return Sizzle(".item1", obj)[0].innerHTML;
}
person jfriend00    schedule 17.07.2012
comment
Ах, да, я понимаю, что вы имеете в виду. Он пишет имя тега с заглавной буквы и удаляет кавычки вокруг класса spans. Ну, по крайней мере, теперь я знаю, в чем причина. Спасибо. - person Tomjr260; 18.07.2012
comment
У меня есть список пролетов с именами и телефонными номерами в них. Что я делаю, так это то, что когда кто-то щелкает, получайте имя из диапазона, который был нажат (в данном случае var f), который будет передан для открытия определенной страницы. - person Tomjr260; 18.07.2012
comment
@ Tomjr260 Tomjr260 - я добавил несколько примеров кода для получения имени с использованием доступа к DOM, а не синтаксического анализа HTML. - person jfriend00; 18.07.2012
comment
Отлично. Я могу использовать jQuery, поэтому я, вероятно, воспользуюсь этим решением. Я хотел бы поддерживать как можно больше браузеров, поэтому я также могу изучить Sizzle, или jQuery будет работать и для IE6? Большое спасибо за ваши ответы. - person Tomjr260; 18.07.2012
comment
@ Tomjr260 - jQuery использует Sizzle внутри в качестве механизма выбора и будет работать со всеми браузерами вплоть до IE6. Если jQuery доступен, вы можете просто использовать jQuery для всех браузеров. - person jfriend00; 18.07.2012

arrow_upward
0
arrow_downward

Это происходит из-за «причудливого режима» в Internet Explorer. Это огромная головная боль, но вы можете отключить ее в IE DevTools или добавив этот метатег на свою страницу:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
person mdziekon    schedule 17.07.2012