CODEWITHSUNDEEP
javascriptjqueryhtmlregex
user1890032
user1890032

Reputation: 19

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

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>

Upvotes: 0

Views: 1379

Answers (3)

ComFreek
ComFreek

Reputation: 29424

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

Upvotes: 0

stema
stema

Reputation: 92996

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.

Upvotes: 1

Marius Schulz
Marius Schulz

Reputation: 16440

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.

Upvotes: 0

Related Questions