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

【问题标题】：Javascript substring and indexOf not working in IE9Javascript 子字符串和 indexOf 在 IE9 中不起作用
【发布时间】：2012-07-17 20:25:35
【问题描述】：

我这里有这个 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）能够像在其他浏览器中一样工作。

【问题讨论】：

不应该是obj.innerHTML.indexOf("<span class=\"item2\">") 而不是obj.innerHTML.indexOf('<span class=\"item2\">') 注意双引号而不是单引号

标签： javascript internet-explorer-9 substring indexof

【解决方案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;
}

【讨论】：

啊，是的，我明白你的意思了。它将标签名称大写并从 spans 类中删除引号。好吧，至少我现在知道是什么原因造成的。谢谢。
我有一个跨度列表，其中包含名称和电话号码。我正在做的是当一个人被点击时，从被点击的范围中获取名称（在这种情况下为 var“f”）以打开特定页面。
@Tomjr260 - 我添加了几个代码示例，说明如何使用 DOM 访问而不是 HTML 解析来获取名称。
非常好。我可以使用 jQuery，所以我可能会使用该解决方案。我想支持尽可能多的浏览器，所以我也可以研究一下 Sizzle，或者 jQuery 也适用于 IE6？非常感谢您的回复。
@Tomjr260 - jQuery 在内部使用 Sizzle 作为它的选择器引擎，并且适用于 IE6 及以下的所有浏览器。如果 jQuery 可用，您可以将 jQuery 用于所有浏览器。

【解决方案2】：

这是因为 Internet Explorer 中的“古怪模式”。这是一个巨大的痛苦，但你可以在 IE DevTools 中禁用它，或者将这个元标记添加到你的页面：

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

【讨论】：