Search code examples
htmljsonjson2html

How to arrange tags with json2html


I'm using json2html and trying to work out an issue where I want to write transform code to give me the following HTML:

<html>
<body>
    <div><b>Bold text</b> plus plain text</div>
</body>
</html>

Which results in this output: Bold text plus plain text

What I have currently is this:

{"tag":"div","children":[
    {"tag":"b","html":"Bold text"}
],"html":" plus plain text"}

But this reverses the order of my text: plus plain text Bold text

I tried to switch the positioning of my transform code to this:

{"tag":"b","children":[
    {"tag":"div","html":" plus plain text"}
],"html":"Bold text"}

This corrected the positioning problem, but all of the text was bold instead of just part of it. Any suggestions for how I can rearrange things to get the desired output?


Solution

  • json2html doesn't have support (yet) for mixing markup with plain text, in other words a bold markup beside plain text like so:

    <div><b>Bold text</b> plus plain text</div>
    

    however you can easily get around this by wrapping the plain text in a span element like this

    <div><b>Bold text</b><span>plus plain text</span></div>
    

    which would look like this in a transform

    {"tag":"div","children":[
       {"tag":"b","html":"Bold text"},
       {"tag":"span","html":" plus plain text"}
    ]}