How to display/output as template string?

#help #javascript

I'm trying to make prettier HTML for my tests so that they are easy to read. This means I want to write them as template strings.

The problem is that tools do not output template strings, instead giving me diffs like this:

"'\\n<ul class=\"list\">\\n    <li class=\"list-item\">\\n        <input\\n            type=\"radio\"\\n            checked=\"\"\\n            name=\"item\"\\n            value=\"1\"\\n        />\\n    </li>\\n</ul>\\n'"

Which I would like to see as:

`
<ul class="list">
    <li class="list-item">
        <input
            type="radio"
            checked=""
            name="item"
            value="1"
        />
    </li>
</ul>
`

I could write a custom solution but is there an existing tool for this?

Top comments (2)

Vesa Piittinen • Sep 3 '20 • Edited

The poor man's solution... open Codepen and throw these codes:

<textarea rows="40" cols="120" style="font-family:monospace"></textarea>

document.getElementsByTagName('textarea')[0].textContent = eval(
    // copy-and-paste the above type of string here
)

Could automate more. Also noticed that apparently my setup for tap-nirvana isn't probably working right as I'm getting deepEqual comparisons in a very unfriendly syntax and the whole purpose for tap-nirvana is to give me pretty colors and diffs.

Vesa Piittinen • Sep 3 '20

Replaced tap-nirvana with tap-difflet and no more issues with double escaped strings and diffs are easier to read :)

DEV Community

How to display/output as template string?

Top comments (2)

Read next

Need Help with a project.

Implementing Redux in Next.js (App Router): A Comprehensive Guide

How to add two numbers in JavaScript without using the "+" operator?

Step-by-Step Angular 17 & .NET 8: Build a Secure Auth App (FREE Course)