regular expression for an html tag

Question

I am developing a form using a tool, in which the field id's change from environment to environment. So I wanted to define something which look for ID in each form. Here is the snippet code :

                      </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>

and here is snippet of JS code :

var submitStatId = "master_DefaultContent_abc_s1243_f1234c";

I am trying for a regex which can look for the id in the html source. Like looking for tags after submission status and den looking for id in those tags.

Thanks, gaurav

Answer 1

I feel like I am missing something, but if you know the ID that you are looking for and your HTML is loaded (and your DOM is ready), this should be pretty simple. Given your existing code here:

var submitStatId = "master_DefaultContent_abc_s1243_f1234c";

. . . in JavaScript, you would do this:

var targetElement = document.getElementById(submitStatId);

. . . and in JQuery, it would be:

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

That will get you a reference to the element that you are looking for (a DOM node in JavaScript, a JQuery object in JQuery). At that point, you should be able to use that reference to get whatever information that you need about the element that has that ID.

---

UPDATE

Okay, now that I have a better understanding of the issue, let me offer up two options:

1. Have the back-end provide the value

If you are able to alter the back-end code, the most straightforward way of determining the ID that you are looking for is to have the back-end code capture it and provide it when it renders the HTML.

This would be as simple as outputting the following code, somewhere in the HTML document:

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

Usually, that kind of data is stored somewhere on the system in a place where the back-end can capture it and pass it to the front-end.

2. Use a rule based on the DOM structure to determine which element that you are looking for

If the format of the HTML is static enough, you can sometimes determine an element based on where it falls in the structure. This is more complex to do with JavaScript, but actually pretty straightforward with JQuery:

Since you've mentioned that this element will always come after the "Submission Status" label, you can use that as a base to find the element that you want . . . you would do something like this:

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

This example is kind of messy, since I'm not sure about the overall structure of the HTML, but, if nothing else, it demonstrates how JQuery allows you to do something like this. Basically, it breaks down like this:

• $submissionStatusElement - captures the element that occurs in the <td> before the one that you want, but could be any element that you know will always be in the same place, in relationship to the element that you are looking for
• $("table tr td span:contains('Submission Status:')") - this selects all spans that contain the text "Submission Status:", that are in a <td>', which is in a, which is in a` The more specific that you can be, the faster JQuery will find what you are looking for and the better your chances of not accidentally picking up an element that you didn't intend to.

• .first(); - Just in case the selector finds more than one span that has the "Submission Status:" text, this will filter the selection down to only the first item (i.e., the first <span> that was found).

• $targetElement - captures the element that you are ultimately looking for.

• $submissionStatusElement - this is the "anchor element" that you just found above
• .closest("td") - this travels up the DOM tree until it hits the first <td> element that it finds. Since the <span> that you found was actually in a <td>, you could have also used .parent(), but .closest() allows for more DOM levels in between your starting element and the one that you are looking for.
• .next() - this finds the next "sibling" element to the <td> that you just found
• .find("span") - this searches for <span> tags within that <td>
• .first(); - again, this filters the results down to the very first <span> that was found.

So, at this point, $targetElement should be a JQuery object that points to the DOM node that you were searching for. This way, you actually found it, without having to know what the id attribute was (though, if you still need it, you could get it with: $targetElement.attr("id");).

The JavaScript version of this is a good bit more complex, so, I won't type it up unless you REALLY need it. :)

Answer 2

It's not clear how to identify the id, so I've assumed an id that starts with "master":

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

See the JSFiddle