使用JavaScript正则表达式查找包含特定文本的html注释的父节点

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>

Answer 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.

Answer 2

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 .

Answer 3

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);