Question

我正在使用工具开发表单，其中字段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之后寻找标签一样。

谢谢，拉夫

Answer 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(); - 如果选择器找到多个具有“提交状态：”文本的范围，则会将选择过滤到仅第一个项目（即第一个{{1}找到了1}}。
<span> - 捕获您最终要查找的元素。
$targetElement - 这是您刚刚在上面找到的“锚元素”
$submissionStatusElement - 它沿着DOM树向上移动，直到它到达它找到的第一个.closest("td")元素。由于您找到的<td>实际上一个<span>，您可能也使用了<td>，但.parent()允许使用更多的DOM级别在你的起始元素和你正在寻找的元素之间。
.closest() - 这会找到您刚刚找到的.next()的下一个“兄弟”元素
<td> - 会在.find("span")

<span>

<td> - 再次将结果过滤到找到的第一个.first();。

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

这个版本的JavaScript版本要复杂得多，所以，除非你真的需要它，否则我不会输入它。：）

Answer 2

目前尚不清楚如何识别id，所以我假设一个以“master”开头的id：

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

请参阅JSFiddle

html标记的正则表达式

2 个答案: