Find a pattern in an HTML comment using regex and javascript

Question

I'm building a code generator/code editor and I'm trying to do a sort of Server Side Include but client side. I want to, using regex and javascript, parse out the "file attribute" in the line below, load the code in the "included" file and then replace the entire comment with that. I don't need help to do the loading only the regEx magic. :)

So first find the "file attribute". Then replace the entire comment with another string.

<!--#include file="footer.html" -->

Yes maybe. But this is a Server-Side-Include kind of code :) — arpo
– arpo, Commented Sep 9, 2012 at 13:14
Doesn't matter. Using an actual HTML parser and applying a regex to the comment is better — Stephen Connolly
– Stephen Connolly, Commented Sep 9, 2012 at 13:20
Are you trying to do server-side includes using JS on the client side? Sounds like it will break at least SEO, and probably other stuff as well. — You
– You, Commented Sep 9, 2012 at 13:25

katspaugh · Accepted Answer · 2012-09-09 14:49:20Z

4

http://jsfiddle.net/xLW83/

var replace = function (str, process) {
     var regex = /<!--\s*#include\s+file="(.+)".*-->/g;
     return str.replace(regex, process);
};

var processFile = function (comment, filePath) {
    return 'content of the file';
};

var result = replace(
    'some text <!--#include file="footer.html" --> something else',
    processFile
);

answered Sep 9, 2012 at 14:49

katspaugh

18k12 gold badges69 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tim Pietzcker · Accepted Answer · 2012-09-09 12:58:42Z

1

If the string is always of this simple form, you can do

result = subject.replace(/<!--#include file="([^"]*)"\s*-->/g, "Another string with file name: $1");

answered Sep 9, 2012 at 12:58

Tim Pietzcker

337k59 gold badges520 silver badges572 bronze badges

3 Comments

arpo Over a year ago

Almost there. What I'm trying to do is get the "footer.html", load its content and then replace the comment with the loaded content. Sort of like server side include but client side.

David Thomas Over a year ago

If only you'd clearly asked that question...could you update your question (click on 'edit') and clearly ask the question to which you want an answer.

Tim Pietzcker Over a year ago

Can there be more than one such include in the string?

Nikola Malešević · Accepted Answer · 2012-09-09 16:42:51Z

0

This is how you get your filename, load its content and generate your string:

$pattern = '/(.*<!--#include\s*file\s*=\s*")(.*?)("\s*-->.*)/s';
$subject = '<!--#include file="footer.html" -->';

if (preg_match($pattern, $subject, $regs)) {
    $prefix = $regs[1];
    $fileName = $regs[2];
    $suffix = $regs[3];

    // Load data from file (implement this by yourself).
    $fileData = loadDataFromFile($fileName)

    $myFinalCompleteString = $prefix . $fileData . $suffix;
}

Here's the explanation of the pattern:

# (.*<!--#include\s*file\s*=\s*")(.*?)("\s*-->.*)
# 
# Options: dot matches newline
# 
# Match the regular expression below and capture its match into backreference number 1 «(.*<!--#include\s*file\s*=\s*")»
#    Match any single character «.*»
#       Between zero and unlimited times, as many times as possible, giving back as needed (greedy) «*»
#    Match the characters “<!--#include” literally «<!--#include»
#    Match a single character that is a “whitespace character” (spaces, tabs, and line breaks) «\s*»
#       Between zero and unlimited times, as many times as possible, giving back as needed (greedy) «*»
#    Match the characters “file” literally «file»
#    Match a single character that is a “whitespace character” (spaces, tabs, and line breaks) «\s*»
#       Between zero and unlimited times, as many times as possible, giving back as needed (greedy) «*»
#    Match the character “=” literally «=»
#    Match a single character that is a “whitespace character” (spaces, tabs, and line breaks) «\s*»
#       Between zero and unlimited times, as many times as possible, giving back as needed (greedy) «*»
#    Match the character “"” literally «"»
# Match the regular expression below and capture its match into backreference number 2 «(.*?)»
#    Match any single character «.*?»
#       Between zero and unlimited times, as few times as possible, expanding as needed (lazy) «*?»
# Match the regular expression below and capture its match into backreference number 3 «("\s*-->.*)»
#    Match the character “"” literally «"»
#    Match a single character that is a “whitespace character” (spaces, tabs, and line breaks) «\s*»
#       Between zero and unlimited times, as many times as possible, giving back as needed (greedy) «*»
#    Match the characters “-->” literally «-->»
#    Match any single character «.*»
#       Between zero and unlimited times, as many times as possible, giving back as needed (greedy) «*»

edited Sep 9, 2012 at 16:42

answered Sep 9, 2012 at 13:56

Nikola Malešević

1,8676 gold badges22 silver badges47 bronze badges

6 Comments

Tim Pietzcker Over a year ago

This fails if the string contains anything more than . Also, this obviously isn't JavaScript but PHP.

katspaugh Over a year ago

What program did you use to generate the explanation of the regex?

Nikola Malešević Over a year ago

@TimPietzcker Read the question: parse out the "file attribute" in the line below. As for your second remark, you're right, I did make a mistake there. Hopefully, someone might find an answer useful, so I will not delete it.

Nikola Malešević Over a year ago

@katspaugh The application is called RegexBuddy and I highly recommend it for regex building/testing.

Tim Pietzcker Over a year ago

Yes it will. The final string will not contain anything that occurs before or after that comment.

|

Collectives™ on Stack Overflow

Find a pattern in an HTML comment using regex and javascript

3 Answers 3

Comments

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related