0

我正在使用一种工具开发一个表单，其中字段 id 从环境到环境的变化。所以我想定义一些在每种形式中寻找 ID 的东西。这是代码段：

                      </div>
                  </div>
              </td>
            </tr>
        </table>
    </span>
</td>
<td class="ml-Col ml-SpcrCol">
</td>
<td class=" FieldLabel ml-FldLbl ml-BrdRight lo_20150 ml-BrdBottom" style="width:15%;">
    <span id="loitem20150">
        <img id="1234requiredImg" class="required-icon" src="/grc/BackgroundImageGenerator.axd?className=Bullet&classProperties=bulletShape:RequiredIndicatorWidget;baseColor:%23B80000" alt="Required" style="display:none;" />
        Submission Status:
    </span>
</td>
<td class="ml-FldCnt lo_20150 ml-BrdBottom" style="width:35%;">
    <span id="master_DefaultContent_abc_s1243_f1234c" class="ComboboxWrapper">
        <table cellpadding="0" cellspacing="0" style="width:100%;">
            <tr>

这是JS代码片段：

var submitStatId = "master_DefaultContent_abc_s1243_f1234c";

我正在尝试一个可以在 html 源代码中查找 id 的正则表达式。就像在提交状态后查找标签和在这些标签中查找 id 一样。

谢谢，高拉夫

4

2 回答 2

1

我觉得我遗漏了一些东西，但是如果您知道要查找的 ID 并且您的 HTML 已加载（并且您的 DOM 已准备好），那么这应该非常简单。鉴于您在此处的现有代码：

var submitStatId = "master_DefaultContent_abc_s1243_f1234c";

. . . 在 JavaScript 中，你可以这样做：

var targetElement = document.getElementById(submitStatId);

. . . 在 JQuery 中，它将是：

var $targetElement = $("#" + submitStatId);

这将使您获得对正在查找的元素的引用（JavaScript 中的 DOM 节点，JQuery 中的 JQuery 对象）。此时，您应该能够使用该引用来获取您需要的有关具有该 ID 的元素的任何信息。

更新

好的，既然我对这个问题有了更好的理解，让我提供两个选择：

1.让后端提供价值

如果您能够更改后端代码，那么确定您要查找的 ID 的最直接方法是让后端代码捕获它并在呈现 HTML 时提供它。

这就像在 HTML 文档中的某处输出以下代码一样简单：

<script>
    var submitStatId = "WHATEVER_THE_CURRENT_VALUE_IS";
</script>

通常，这类数据存储在系统的某个位置，后端可以捕获它并将其传递给前端。

2. 使用基于 DOM 结构的规则来确定您要查找的元素

如果 HTML 的格式足够静态，您有时可以根据元素在结构中的位置来确定它。这对于 JavaScript 来说更复杂，但对于 JQuery 来说实际上非常简单：

由于您提到此元素将始终位于“提交状态”标签之后，因此您可以使用它作为查找所需元素的基础。. . 你会做这样的事情：

var $submissionStatusElement = $("table tr td span:contains('Submission Status:')").first();
var $targetElement = $submissionStatusElement.closest("td").next().find("span").first();

这个例子有点乱，因为我不确定 HTML 的整体结构，但是，如果没有别的，它演示了 JQuery 如何允许你做这样的事情。基本上，它分解如下：

  • $submissionStatusElement- 捕获<td>您想要的元素之前出现的元素，但可以是您知道将始终在同一个位置的任何元素，与您正在寻找的元素相关
  • $("table tr td span:contains('Submission Status:')")- 这会选择所有包含文本“提交状态：”的跨度，它们位于<td>', which is in a, which is in a`中你可以越具体，JQuery 越快找到你正在寻找的内容，并且你不会意外拾取元素的机会就越大你不打算这样做。

  • .first();- 万一选择器找到多个具有“提交状态：”文本的跨度，这会将选择过滤到仅第一个项目（即<span>找到的第一个项目）。

  • $targetElement- 捕获您最终要寻找的元素。

  • $submissionStatusElement- 这是您刚刚在上面找到的“锚元素”
  • .closest("td")- 这会沿着 DOM 树向上移动，直到<td>找到它找到的第一个元素。由于<span>您发现的实际上是在a<td>中，因此您也可以使用.parent()，但.closest()允许在您的起始元素和您正在寻找的元素之间有更多的 DOM 级别。
  • .next()<td>- 这会找到您刚刚找到的下一个“兄弟”元素
  • .find("span")- 这会在其中搜索<span>标签<td>
  • .first();- 同样，这会将结果过滤到<span>找到的第一个结果。

因此，此时，$targetElement应该是一个指向您正在搜索的 DOM 节点的 JQuery 对象。这样，您实际上找到了它，而不必知道该id属性是什么（尽管，如果您仍然需要它，您可以使用：）$targetElement.attr("id");。

这个的 JavaScript 版本要复杂一些，所以，除非你真的需要它，否则我不会输入它。:)

于 2013-11-13T19:48:10.107 回答
0

不清楚如何识别 id，所以我假设 id 以“master”开头：

var submitStatId = html.replace(/[\s\S]*<span id=\"(master_\S+)\"[\s\S]*/, "$1");

请参阅JSFiddle

于 2013-11-14T14:21:22.930 回答