How to allow filtering of plain-text into HTML tags in NodeJS and PUG?

Question

I have a web application in NodeJS and PUG/Jade. I want to separate the logic of the application, controlled by a developer, from the textual content, controlled by a marketing person and translators, while keeping all the source code integrated. (I asked about ways for this separation here and got no answers as of this writing).

For English, I use a JSON object en.json with:

{
  "404": {
    "notFound": "Page not found"
  }
}

the controller loads it with:

let localText = require('./en.json');
res.status(404).render('404', {
  text: localText
});

and the view renders it with:

h1 #{text['404'].notFound}

I would like to include links in the JSON object, such as:

{
  "404": {
    "notFound": "Page not found. Go to <a href=\"www.twitter.com\">Twitter</a>, maybe?"
  }
}

NodeJS renders the page with the source code and not the link. I've fixed it temporarily by splitting into three:

{
  "404": {
    "notFound1": "Page not found. Go to",
    "notFound2": "Twitter",
    "notFound3": ", maybe?"
  }
}

and the view:

h1 #{text['404'].notFound1} #[a(href="www.twitter.com") #{text['404'].notFound2}] #{text['404'.notFound3}

And it has now become a pain to maintain.

I understand from this page that I could create a filter to pre-process all links, eg:

options.filters = {
  'my-own-filter': function (text) {
    text = text.replace("Twitter", "<a href=\"www.twitter.com\">Twitter</a>")
    /* all other replacements */
    return text;
  }
};

I couldn't find how to pass such filter options to the web application, whose only PUG line is app.set('view engine', 'pug'); .

How can I pre-process a plain-text with NodeJS and Jade to populate links and display them nicely to the browser user?

Answer 1

You should be able to use unescaped string interpolation syntax ( !{variable} ) instead of the regular string interpolation syntax ( #{variable} ) to get the HTML to render correctly.

In your case:

h1 !{text['404'].notFound}

But keep in mind this word of warning from the Pug documentation :

Caution

Keep in mind that buffering unescaped content into your templates can be mighty risky if that content comes fresh from your users. Never trust user input!