Click here to Skip to main content
12,559,868 members (50,345 online)
Click here to Skip to main content
Add your own
alternative version


6 bookmarked

Easy JavaScript Templating

, 7 Jan 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Below is an easy way to create Templates in JavaScript without changing the code format.


Below is an easy way to create Templates in JavaScript files without changing your code format. edit


I needed an easy way to keep my HTML clean and formated properly, when added to JavaScript files. So I came up with the following solution that seems to work well.

Using the code

All you need is the function below to keep your code clean.

// Loads formatted code from a JavaScript string variable.
function template(t) { return t.toString().replace(/^[^\/]+\/\*!?/, '').replace(/\*\/[^\/]+$/, ''); }

Easy JS Templates

To create nice looking, easy to read, easy to manage templates, follow the examples below. You won't have to worry about single or double quotes terminating your strings. Post between /*! and */ and everything should work fine.

// HTML Template Example
var html = template(function() {/*!

    <title>JavaScript Easy Templating</title>
    <a id="test" href=""></a>


// CSS Template Example
var css = template(function() {/*!

<style type="text/css">

    color: red;




This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior) Codevendor
United States United States
Please visit my personal website for my latest codes and updates.

Raise Bid

You may also be interested in...


Comments and Discussions

PraiseThanks ! Pin
manuel23118-Feb-16 3:43
membermanuel23118-Feb-16 3:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.161026.1 | Last Updated 8 Jan 2014
Article Copyright 2014 by M@dHatter
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid