How to stop twig debug from breaking HTML when inside tags?

Question

Originally this was in a views field rewrite but i have since moved it to

views-view-fields--[view name]--[machine ID].html.twig

And behaviour seems to be the same:

 <a href="{{ fields.path.content}}" class="menu-item">{{fields.title.content}}<span data-background-image="{{ fields.field_image.content}}"></span></a>

This renders fine when twig debug is set to false in development.services.yml When twig debug is turned on, the markup becomes badly broken.

I.e.

<span data-background-image="

    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'views_view_field' -->
    <!-- BEGIN OUTPUT from 'themes/mytheme/templates/views/views-view-field.html.twig' -->


    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'image_url_formatter' -->
    <!-- BEGIN OUTPUT from 'modules/contrib/image_url_formatter/templates/image-url-formatter.html.twig' -->
    http://mysite.local/sites/default/files/styles/menus_image/public/menus/image.png?itok=1ZnZSCkX
    <!-- END OUTPUT from 'modules/contrib/image_url_formatter/templates/image-url-formatter.html.twig' -->


    <!-- END OUTPUT from 'themes/mytheme/templates/views/views-view-field.html.twig' -->

    "></span>

HTML does not support <!-- --> inside tags, which seems to be the core issue. Is there a workaround to this, or it's just a limitation of Twig debug?

Answer 1

You can apply |render|striptags|trim twig filters:

<a href="{{ fields.path.content|render|striptags|trim }}" class="menu-item">{{ fields.title.content }}<span data-background-image="{{ fields.field_image.content|render|striptags|trim }}"></span></a>

If you want to save (not delete) for example div or img tags you can also write:

{{ fields.field_image.content|render|striptags('<div>, <img>')|trim }}

Seen here https://www.drupal.org/node/2672656#comment-11821896