【问题标题】:Finding part of a string via javascript通过javascript查找字符串的一部分
【发布时间】:2015-05-13 09:13:16
【问题描述】:

我有以下 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 的值,然后将其正确地分配给元素

【问题讨论】:

  • 为什么要使用字符串操作,而不是使用 DOM 中的元素?
  • 有什么理由不使用 DOM?
  • 我不知道该怎么做。选项卡索引设置在另一个位置,出于某种原因将其放置在样式部分中。由于这不是有效的 CSS,它被忽略了。我需要获取该值并将其放在适当的 HTML 元素 TabIndex

标签: javascript html regex


【解决方案1】:

更新答案

你的评论:

我知道它在错误的位置,但我无法手动移动它。

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

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

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

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

首先,获取样式属性文本:不幸的是,默认情况下,IE8 将在名称错误的“兼容性视图”中显示“内联网”站点。 (即:兼容旧的损坏的 IE7 和更早版本,不兼容,你知道,标准。) IE7 和更早版本有一个可怕的错误:element.getAttribute("style") 给你style 对象,而不是样式属性文本;与element.style 获得的对象相同。虽然他们在 IE8 中修复了这个问题,但在兼容性视图中它被破坏了(要......“兼容”)。

所以这个:

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

...在任何体面的浏览器上给我们一个字符串,在不兼容视图时在 IE8 上给我们一个字符串,但在兼容性视图时给我们一个对象。

所以要获得文本,我们必须在别处寻找。幸运的是,微软是 innerHTMLouterHTML 的先驱,所以我们可以这样做:

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"));
&lt;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"/&gt;

你的评论:

但是如果我将第一行更改为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);
&lt;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"/&gt;

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

【讨论】:

  • @Sean:你去吧。可以在 IE8 上工作,甚至可以使用 Intranet 站点。我很高兴 IE 现在更好了。 :-)
  • 谢谢。但是如果我将第一行更改为document.getElementsByTagName("input");,上述方法是否仍然有效
  • @Sean:这会给你一个列表。您必须遍历列表(它有一个length 属性,并且您像数组一样对它进行索引,从0 开始,以获取每个元素)。但是,如果你对每个元素都这样做,当然,它会起作用。
  • @Sean:嗯,我继续添加了一个示例循环。 :-)
【解决方案2】:

永远不要通过正则表达式解析 HTML 元素。见this question for some fun

如果您有一个 HTML 元素,您可以通过 .getAttribute 访问它的所有属性,或者在 CSS 样式属性的情况下,例如使用 .style.top 访问 top 属性。

您的问题可能是您将tabindex 属性放在样式属性中。根据this page,你应该将它设置为一个单独的属性,这样你就可以通过

document.getElementById("1").getAttribute("tabindex");

【讨论】:

    【解决方案3】:

    首先,你应该使用getElementById,它更适合复杂的场景。 如果要访问属性的原始字符串值,可以使用:

    document.getElementById("1").getAttribute("style")
    

    然后根据需要处理它(使用搜索、substr 等)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-11-15
      • 1970-01-01
      相关资源
      最近更新 更多