Javascript子字符串和indexOf在IE9中不起作用

Question

我在這里有這個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

因此，它將vars“ first”和“ second”放到var“ first”中，並將“ f”和“ s”放到var“ f”中。

我想知道是否有任何方法可以使IE9（也可能還有其他版本的IE）更正此問題，使其在其他瀏覽器中也可以正常工作。

Answer 1

模式匹配innerHTML在IE中尤其是一個問題，通常不是一個好主意。 IE通常不會向您返回頁面中原來的HTML。 它經常重新引用或刪除引號，更改屬性的順序，更改大小寫等。IE顯然是在重新構造HTML，而不是將頁面的原始內容還給您。 因此，您無法在IE中可靠地模式匹配innerHTML。 您可能會匹配一些特定的東西（標記的開頭），但是您不能期望屬性位於特定位置或具有特定格式。

如果在IE中使用console.log(obj.innerHTML) ，您可能會看到我在說什么。 看起來會有所不同。

一個更強大的解決方案是使用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;
}

Answer 2

這是由於Internet Explorer中的“ Quirky模式”引起的。 這是一個巨大的麻煩，但是您可以在IE DevTools中禁用它，也可以通過將此metatag添加到您的頁面中來禁用它：

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