pug variable not evaluated on a href tag

Question

In my Express JS web app, a login route renders some variables to the login pug view.

In login.js

router.get('/login', function(req, res, next) {
  var locations = ["Location 1", "Location 2"];
  var count = 0;
  var title = 'Login';
  console.log("req.originalUrl=" + req.originalUrl);

  res.render('login', {
           title: title, // Give a title to our page
           jsonData: locations, // Pass data to the View
           count: locations.length,
           originalUrl: req.originalUrl
      });
});

In login.pug

extends layout

block content
  div(class='container mt-3')
    h2 Welcome to #{title}, #{count}, #{originalUrl}
    a(class="btn btn-primary" href="/location/new" role="button") NEW
    br
    br
    ul#locList(class='list-group')
      for location in jsonData
        li(class="list-group-item")
          a(href='#{originalUrl}' + '?' + location, class='list-group-item list-group-item-action')
            h2=location

The originalUrl variable in the a href was not evaluated as 'http://localhost:3000/login?Location%201', but 'http://localhost:3000/login#{originalUrl}?Location%201' instead.

Then I had to change it to 'a(href=originalUrl + '?' + location, class='list-group-item list-group-item-action')' in order to make it work.

In a nutshell, a(href='#{originalUrl}') does not work while a(href=originalUrl) works, for a href.

However, the same variable was correctly evaluated at line 'h2 Welcome to #{title}, #{count}, #{originalUrl}' as 'Welcome to Login, 2, /login'.

How was the same variable evaluated differently on a href from h2?

Dunbarton

It's because when you are using #{variableName} inside quotes, pug is evaluating that as a literal string. But when you are trying to use it outside any quotes, then it understands that this is a variable and uses its value instead. – Ingmar

Answer 1

This is known behavior that came about a few versions ago (I think 2016). This #{style} interpolation is not supported in attributes:

Caution

Previous versions of Pug/Jade supported an interpolation syntax such as:

a(href="/#{url}") Link This syntax is no longer supported. Alternatives are found below. (Check our migration guide for more information on other incompatibilities between Pug v2 and previous versions.)

For more see: https://pugjs.org/language/attributes.html

You should be able to use regular template literals:

a(href=`${originalUrl}`)

Antithesis

Add an enclosing parentheses on the link and it will work e.g. a(href=${originalUrl}) – Massasauga

@Antithesis Meyer, THANK YOU, I have been searching for an answer for the longest time. I tried all sorts of syntactical tricks but none worked...yours did.! – Malpighiaceous

Answer 2

There is an easy way to do that, write directly the variable, without using quotes, brackets, $, !, or #, like this:

a(href=originalUrl) !{originalURL}

The result of this is a link with the text in originalURL

Example: if originalUrl = 'www.google.es'

a(href='www.google.es') www.google.es

finally you get the link: www.google.es

Petulah