0

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

4

2 回答 2

4

模式匹配innerHTML在 IE 中尤其是一个问题，通常是个坏主意。IE 通常不会向您返回页面中最初的相同 HTML。它经常重新引用或删除引号，更改属性的顺序，更改大小写等... IE 显然是在重构 HTML，而不是返回页面中的原始内容。因此，您无法在 IE 中可靠地模式匹配 innerHTML。您可能可以匹配一些特定的东西（标签的开头），但您不能期望属性位于特定位置或具有特定格式。

如果您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;
}
于 2012-07-17T20:30:18.670 回答
0

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

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
于 2012-07-17T20:36:49.333 回答