How to replace break lines in twig

Question

I want to fill a JavaScript array with values from PHP variables using TWIG.

<script type="text/javascript">
   var cont=new Array();
   {% for key, post in posts %}
   cont[{{ key }}] = "{{ post.content }}";
   {% endfor %}
</script>

The problem is that I have post variable with several lines, so the above code make JS commands separated to few lines, that is translated as several commands, and I have an error.

So I think that I need to replace all the 'new lines' to "\n".

I tried to do like this:

cont[{{ key }}] = "{{ post.content | replace({"\n":"<br>"}) }}";

But it does not help. It still stay as few lines…

Whitebeam

The only correct way to do this is the following: {{ post.content | replace({ '\r\n': '\\r\\n', '\n': '\\n', '\r': '\\r' }) }} – Martimartial

You can also now use backticks (template literals) to put code with newlines in JavaScript string. – Rutharuthann

Answer 1

For a similar problem (outputting user data into Javascript), I found the following was necessary:

post.content|replace({"\n":' ', "\r":' '})

ie. replace \r as well as \n with spaces. This is because some user-entered content (especially for users on Windows) may contain \r (carriage returns) as well as line-breaks, which it seems do still break Javascript if not removed.

For me, nl2br wasn't suitable, because I was feeding the user content into a Javascript method (for adding user-inputted addresses to a Google Map, for what it's worth), so I didn't want any line breaks, HTML or otherwise.

Wahoo

Answer 2

The best way (and good way) to write some javascript using Twig (if you don't want \r\n) is this way:

{{ example|e('js') }}

Replacing <br /> can, of course, work, but you will encounter other problems in javascript using data from your data. Using javascript escape, it will perfectly write valid javascript the way you'd expect it to do.

For more information about escape filter:

https://twig.symfony.com/doc/3.x/filters/escape.html

Brindle

This should be the accepted answer, thanks! – Haerle

Wow, this saved me. The link doesn't work though. The updated one is twig.symfony.com/doc/3.x/filters/escape.html – Piperine

Answer 3

Use {{ post.content | nl2br }}

Caddish

nl2br doesn't replace \n, it only adds `<br />' before it... – Haerle

Answer 4

There is nl2br filter: http://twig.sensiolabs.org/doc/filters/nl2br.html

Unstuck

Unfortunately, this is not a solution for asked question in context escaping \n and \r in JavaScript, because twig's nl2br filter is simple fallback to nl2br() function in PHP, which is not replacing \n and \r characters at all, but replaces them by <br />\n\r, so whitespaces are still in code. – Nanna

Answer 5

If you want to just remove brake lines, this is not working:

{{ post.content | replace({"\n":""}) }}

'\' is a special sign, so you need to escape it. This will work:

{{ post.content | replace({"\\n":""}) }}

Kiersten

Answer 6

You have to use a {% spaceless %}{% endspaceless %} TAG, like this,

<script type="text/javascript">
   var cont=new Array();
   {% for key, post in posts %}
   cont[{{ key }}] = "{% spaceless %}{{ post.content }}{% endspaceless %}";
   {% endfor %}
</script>

Enjoy ;-)

Granivorous

Answer 7

Why not the built-in filter?

{{ post.content | nl2br }}

Constantine