CODEWITHSUNDEEP
node.jspug
Gikkman
Gikkman

Reputation: 762

NodeJS Jade (Pug) inline link in dynamic text

I have this NodeJS application, that uses Jade as template language. On one particular page, one text block is retrieved from the server, which reads the text from database.

The problem is, the returned text might contain line-breaks and links, and an operator might change this text at any time. How do I make these elements display correctly?

Most answers suggest using a new line:

p
    | this is the start of the para  
    a(href='http://example.com') a link
    |  and this is the rest of the paragraph

But I cannot do this, since I cannot know when the a element appears. I've solved how to get newline correct, by this trick:

p
    each l in line.description.split(/\n/)
        = l
        br

But I cannot seem to solve how to get links to render correctly. Does anyone know?

Edit:
I am open to any kind of format for links in the database, whatever would solve the issue. For example, say database contains the following text:

Hello!
We would like you to visit [a("http://www.google.com")Google]

Then we would like that to output text that looks like this:

Hello!
We would like you to visit Google

Upvotes: 3

Views: 2634

Answers (1)

gandreadis
gandreadis

Reputation: 3242

Looks like what you're looking for is unescaped string interpolation. The link does not work in the output because Pug automatically escapes it. Wrap the content you want to insert with !{} and it should stop breaking links. (Disclaimer: Make sure you don't leave user input unescaped - this only is a viable option if you know for sure the content of your DB does not have unwanted HTML/JS code in it.)

See this CodePen for illustration.

With this approach, you would need to use standard HTML tags (<a>) in your DB text. If you don't want that, you could have a look at Pug filters such as markdown-it (you will still need to un-escape the compilation output of that filter).

Upvotes: 2

Related Questions