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

因此它将变量“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 mode”而发生这种情况。这是一个巨大的痛苦，但您可以在IE DevTools中禁用它，或者将此元标记添加到您的页面：

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

Javascript substring和indexOf在IE9中不起作用

2 个答案: