CODEWITHSUNDEEP
javascriptregex
ryandlf
ryandlf

Reputation: 28555

Using Javascript Regular Expression to Extract a Comment From Within a Function

I am loading a js file via httprequest and attempting to parse a specific string (in this case a comment) from the resulting text, but am having trouble with the regular expression.

function SampleTest() {
    this.test1 = function() {
        /* :DOM <div id="sampleDIV">You loaded the sample div</div> */
    };
    this.test2 = function() {
        /* :DOM <div>Second Div Loaded</div> */          
    }
}

In another script I have the following functions: 

var getElementFromComment = function(obj) {

    function getHTML(method) {
        var httpRequest = new XMLHttpRequest();
        httpRequest.open('GET', 'SampleTest.js', false);
        httpRequest.send();
        var response = httpRequest.responseText;

        var re = new RegExp(method); //Not sure how to implement the regex
        var result = response.match(re);
        console.log(result);
    }

    for(var method in obj) {
        getHTML(method);
    }
}

var sampleTest = new SampleTest();
getElementFromComment(sampleTest);

The end result should be extracting the HTML from that comment in SampleTest based on the function name that is passed in. In my case I will be looping through all functions and retrieving the html string for each one after the other. I am assuming the proper approach would be to:

  1. Get the Javascript file via httprequest - Already done
  2. Find the function within SampleTest that matches the name passed into getHTML and return the entire function as a string via regex.
  3. Use another regular expression to extract the string from within the function string starting with /* :DOM and ending with */ This should be able to be a multi-line comment even though for simplicity I am using only a single line.
  4. And finally, replace all the garbage such as *'s and :DOM which should leave me with an html string.

I can't simply search the file for the comment off the bat because the file will likely contain multiple functions, each of which will have their own comment. To put this all in context, I am doing this because I want to be able to load HTML for javascript unit tests on the fly. The function will eventually loop through all functions in the unit test object, get the HTML, load it, run the function, remove the HTML, and move onto the next function.

UPDATE Thanks to all the help from the accepted answers poster, I was able to get everything working. I did however have to make a few adjustments such as adding support for multi-line comments as well as replacing all the garbage characters after the fact so I could get a pure HTML string. My updated code is below.

function getHTML(method, str) {
        var commentMatch;
        var re = new RegExp(method+'\\s*=\\s*function[^}]+\\*/'); //Not sure how to implement the regex
        var fnMatch = str.match(re);
        if(fnMatch) {
            var fnEx = new RegExp('\/\*\s*:[^\s]+\s*(.*?|\n)\*\/', 'g');
            commentMatch = fnMatch[0].match(fnEx);
            var result = commentMatch[0].replace(/(\s*:DOM\s*)|(\*\/)|(\/\*)|(\*)/gm, '');
            result = result.replace(/^\s*/gm, '');
            if(commentMatch) {
                return result;
            }
        }
    }

Upvotes: 3

Views: 939

Answers (1)

jfriend00
jfriend00

Reputation: 707318

If what you're trying to do is to extract the comment string from a piece of javascript code in a javascript string variable, you can do that like this:

var str = "function SampleTest() { \
    this.test = function() { \
        /* :DOM <div id=\"sampleDIV\">You loaded the sample div</div> */ \
    }; \
}";

var matches = str.match(/\/\*\s*:DOM\s*(.*?)\*\//);
if (matches) {
    alert(matches[1]);
}​

Working demo here: http://jsfiddle.net/jfriend00/hWCwA/

If the ":DOM" part is not always the same, then you could use a slightly different version like this:

var str = "function SampleTest() { \
    this.test = function() { \
        /* :DOM <div id=\"sampleDIV\">You loaded the sample div</div> */ \
    }; \
}";

var matches = str.match(/\/\*\s*:[^\s]+\s*(.*?)\*\//);
if (matches) {
    alert(matches[1]);
}​

Working demo here: http://jsfiddle.net/jfriend00/qpF3k/

OK, based on your comments, here's another shot at it. This will find the next comment after the function name. It will stop looking at the first } so it should not go into the next function if this one has no comment.

function findComment(funcName, str) {
    var commentMatch;
    var re = new RegExp("this\\." + funcName + "\\s*=\\s*function[^}]+\\*/");
    var funcMatch = str.match(re);
    if (funcMatch) {
        commentMatch = funcMatch[0].match(/\/\*\s*:[^\s]+\s*(.*?)\*\//);
        if (commentMatch) {
            return(commentMatch[1]);
        }
    }
    return null;
}

Upvotes: 1

Related Questions