Using JavaScript Regex to find parent node of html comment containing specific text

Question

I'm looping over an array and trying to find the parent html elements (tr & td) of an html comment tag containing specific text matching the current array value.

For the example below, I'm passing in the value of myField as dev_LocationID but it is always returning null. In this examle I'm trying to match the full string FieldInternalName = ' dev_LocationID ' I know the text is there. What am I doing wrong? Any help would be appreciated!

myField = 'dev_LocationID';

function fnFindThisField(myField){
    var myFieldInternalName = "FieldInternalName='" +myField+ "'";  
    regexComment = new RegExp(/<!--\s*/myFieldInternalName\s*-->/g);
    targetElement = regexComment.test($('td').html());
    return targetElement;
}

Sample of html

<tr>
  <td><H3 ><nobr>Form Label</nobr></td>
  <td class="ms-formbody">  
     <!-- FieldName='Location ID'   FieldInternalName='dev_LocationID'  -->
    <select name="ctl00$dev_LocationID" id="ctl00_dev_LocationID">
    <option value="Please choose...">Please choose...</option>
    <option selected="selected" value="1">Location 1</option>
    <option selected="selected" value="1">Location 2</option>
  </select>
  </td>
</tr>

score 1 · Answer 1 · answered Jan 06 '14 at 15:06

1

You don't take care to match the "FieldName='Location ID'" part in your comment, so your regex does not match.

The other thing is, it is very difficult (sometimes impossible) to handle html with regex, think about using a parser.

answered Jan 06 '14 at 15:06

stema

90,351
20
107
135

score 0 · Answer 2 · edited May 23 '17 at 11:51

Try this:

myField = 'dev_LocationID';

function fnFindThisField(myField){
    var myFieldInternalName = "FieldInternalName='" +myField+ "'";  
    regexComment = new RegExp("/<!--.+?" + myFieldInternalName +"\s*-->"/g);
    targetElement = regexComment.test($('td').html());
    return targetElement;
}

Your code isn't legal JavaScript code. The string variable that you want to use to build your regular expression isn't interpolated as you might think it would be. Here, I'm just using the RegExp constructor function that accepts a string and manually build the pattern using string concatenation.

Note that parsing HTML using regex is likely to be a very brittle solution. Parsing arbitray HTML using Regex isn't even possible, as others on StackOverflow have written about before.

score 0 · Answer 3 · answered Jan 06 '14 at 15:30

The best way is to actually walk the DOM tree instead of regex-searching its HTML string representation.

→ jsFiddle

function searchComments($dom) {
    var comments = [];

    $dom.contents().each(function (idx, node) {
        if (node.nodeType === Node.ELEMENT_NODE) {
            comments = comments.concat(searchComments($(node)));
        } else if (node.nodeType === Node.COMMENT_NODE) {
            comments.push(node);
        }
    });
    return comments;
}

function fnFindThisField(myField) {
    var myFieldInternalName = "FieldInternalName='" + myField + "'";
    var foundCommentNode = null;

    searchComments($(document.body)).every(function (commentNode) {
        if (commentNode.nodeValue.indexOf(myFieldInternalName) !== -1) {
            foundCommentNode = commentNode;
            return false;
        }
        return true;
    });
    return foundCommentNode;
}
console.log(fnFindThisField("dev_LocationID").parentNode);

Much appreciated! I've spent 3 days researching this (to the contrary of whoever downgraded my question) to no avail. Part of the problem is the array has almost 100 values and so does the form. So the iterations are going to mount up significantly which is why I was just looking to find a match. I'll experiment a bit with your suggestioon. — user1890032, Jan 06 '14 at 16:03

Using JavaScript Regex to find parent node of html comment containing specific text

3 Answers3