javascript - 通过javascript查找字符串的一部分

Question

我有以下 HTML 复选框

<input name="1" title="" id="1"  style="position: absolute; top: 333px; left: 760px; tabindex: 11; z-order: 99;" type="checkbox" CHECKED="checked" runat="server" value="on"/>

我想在上面的 style 属性中获取 tabindex 的值。注意事项:

1. 我知道tabindex放错地方了(它不应该在style属性文本中，它本身应该是一个属性) .我无法更改它，它是由我无法修改的(非常旧的)工具完成的。

2. 我必须支持 IE8，当我尝试时遇到了一个问题，即 IE8 无法正确处理正则表达式中的 \s(它是 doesn't match hard spaces)。

我尝试使用 .search() 来执行此操作，但是当我使用以下行搜索我的复选框时，我不知道如何返回字符串值:

var test = document.getElementsByTagName("input");

目标是从 style 属性中获取 tabindex 的值，然后正确地将其分配给元素。

Answer 1

更新的答案:

回复你的评论:

I know it's in the wrong place, but I've no way of manually moving it.

好的，这就是我们使用正则表达式的原因，明白了。

所以我们这里有两个任务:

1. 获取 style 属性的文本，这应该很容易，但在 IE8 上却非常困难。

2. 从该文本中获取 tabindex 的值。

首先，获取样式属性文本:不幸的是，默认情况下，IE8 将在可笑地错误命名的“兼容性 View ”中显示“Intranet”站点。 (即:与旧的损坏的 IE7 和更早版本兼容，不兼容，你知道的，标准。)而且 IE7 和更早版本有一个可怕的错误:element.getAttribute("style") 给了你 style 对象，不是样式属性文本；您使用 element.style 获得的相同对象。尽管他们在 IE8 中修复了该问题，但在兼容性 View 中它已损坏(要...“兼容”)。

所以这样:

var text = element.getAttribute("style"):

...会在任何合适的浏览器上给我们一个字符串，在不兼容 View 时在 IE8 上，但在兼容 View 下会给我们一个对象。

因此，要获得文本，我们必须查看其他地方。幸运的是，Microsoft 是 innerHTML 和 outerHTML 的先驱，所以我们可以这样做:

var text = element.getAttribute("style"):
if (typeof text !== "string") {
    text = element.outerHTML;
}

当然，这不仅为我们提供了样式文本，而且已经足够接近了。我们仍然没有尝试 parse HTML with regex (虽然我们用 outerHTML 稍微插入了它，但它位于 input 上，因此相当包含)，我们正在寻找有限字符串中的有限内容。 .

现在从该文本中我们需要 tabindex 值:此表达式匹配 tabIndex(不区分大小写)后跟任何空格后跟 : 后跟空格后跟一些数字我们捕获的数字:

/\btabindex\s*:\s*(\d+)/i

然后我们可以使用捕获组从不正确的位置获取值并将其设置在正确的位置:

var element = document.getElementById("1");
var text = element.getAttribute("style");
if (typeof text !== "string") {
    // Bad IE! Bad!
    text = element.outerHTML;
}
var match = /\btabindex\s*:\s*(\d+)/i.exec(text);
var index = match && match[1];
if (index) {
    element.setAttribute("tabindex", index);
}
alert("Index: " + (index || "unknown"));

实例:

var element = document.getElementById("1");
var text = element.getAttribute("style");
if (typeof text !== "string") {
    // Bad IE! Bad!
    text = element.outerHTML;
}
var match = /\btabindex\s*:\s*(\d+)/i.exec(text);
var index = match && match[1];
if (index) {
    element.setAttribute("tabindex", index);
}
alert("Index: " + (index || "unknown"));

<input name="1" title="" id="1"  style="position: absolute; top: 333px; left: 760px; tabindex: 11; z-order: 99;" type="checkbox" CHECKED="checked" runat="server" value="on"/>

回复你的评论:

But would the above still work if i changed the first line to document.getElementsByTagName("input");

当然，您只需循环执行即可:

var list, index, element, text, match;
list = document.getElementsByTagName("input");
for (index = 0; index < list.length; ++index) {
    element = list[index];
    text = element.getAttribute("style");
    if (typeof text !== "string") {
        // Bad IE! Bad!
        text = element.outerHTML;
    }
    match = /\btabindex\s*:\s*(\d+)/i.exec(text);
    tabindex = match && match[1];
    if (tabindex) {
        element.setAttribute("tabindex", tabindex);
    }
}

(我在那里调用了 tabindex tabindex，因为循环索引经常被称为 index。)

---

原始答案:

您的 tabIndex 位置错误:它不是样式属性，它是独立属性:

<input name="1" title="" id="1" tabindex="11" style="position: absolute; top: 333px; left: 760px; z-order: 99;" type="checkbox" CHECKED="checked" runat="server" value="on"/>
<!-- Here ----------------------^                                                       -->

然后使用tabIndex反射属性:

var index = document.getElementById("1").tabIndex;

实例:

alert(document.getElementById("1").tabIndex);

<input name="1" title="" id="1" tabindex="11" style="position: absolute; top: 333px; left: 760px; z-order: 99;" type="checkbox" CHECKED="checked" runat="server" value="on"/>

---

旁注:虽然在 HTML 中有效，但以数字开头的 id 值很难在 CSS 中使用；最好避开它们。