{{pagetitle}}

In the category of "silly ideas": {{pagetitle}}.

In case you have a page that relies on repeated data, you might want to use on-page variables so that you don't have to write the same thing over and over again, while still using HTML rather than some server side programming language. Say you have sections that all start with the same phrase, or you want to bundle specific CSS classes under a single word. It would be convenient if you could just use some on-page variables for that.

It's quick enough to write, so let's make it happen:

    var replaceOnDOMContentLoaded = {
      pagetitle: "Let's do client-side macros"
    };

paired with:

    In the category of "silly ideas": {{pagetitle}}.

becomes: "In the category of "silly ideas": {{pagetitle}}." - Nice.

In fact, let's allow recursive macros, too:

    var replaceOnDOMContentLoaded = {
      author: "pomax",
      domain: "nihongoresources.com",
      email: "{{author}}@{{domain}}",
      mailto: "mailto:{{email}}",
      me: "<a href='{{mailto}}'>me</a>"
    };

paired with:

    <p>This page was created by {{me}}</p>

becomes: "This page was created by {{me}}". Sweet!

You can also make it do substitutions in non-standard context, such as "pre" blocks, or node attributes such as "a.href":

    var replaceOnDOMContentLoaded = {
      author: "pomax",
      domain: "nihongoresources.com",
      email: "{{author}}@{{domain}}",
      mailto: "mailto:{{email}}",
      me: "<a href='{{mailto}}'>me</a>",
      blocks: [a.href]
    };

paired with:

    <div>This page was created by <a href="{{mailto}}">Pomax</a></div>

becomes:

Hurray! Using custom blocks needs a bit of thinking though: if you have an <a> inside a <p>, for instance, variables in a.href will already get substituted, because it operates on the ".innerHTML" property. I could make it operate on the DOM node content instead, but not unless someone actually requests it =)

I'm going to use this right now!

Just remember that it horribly breaks your page when javascript is disabled. Of course, what doesn't use JavaScript anymore these days. Other than Lynx. And honestly, that could do with jsshell compiled into it, and also a graphics-to-ascii library so that we can have glorious terminal web pages... anyway, I digress: it's client-side substitution, if the client has no (or has disabled) JavaScript, your page will look quite silly.

Oh, and forget about SEO.

Whatever, just give me the damn script

It's right here.

What, no boilerplate?

Oh, sorry about that; here:

  <script type="text/javascript">
    var replaceOnDOMContentLoaded = {
      // All variables used on this page
      varname: "Substitution string",
      // All additional blocks substitution should take place in
      blocks: []
      // Quoted tags, "tagname.attribute" for attributes.
      // If empty, don't bother adding it.
    };
  </script>
  <script type="text/javascript" src="replaceOnDOMContentLoaded.js"></script>

And remember, it's a JavaScript object, so the last definition shouldn't need a comma at the end.