P5.js, DOM, html and quotes

phoebus

Hi there

This is not like a question, just the post I wish I had find when I was looking for a solution to my problem

Using DOM in p5.js, you can embed HTML code in instructions like .html() and that is just great The thing is, more often than not you the html code that you want to embed within the 2 singles quotes already contains other singles quotes... therefor messing with your parameters

Of course the great people who are building those amazing tools have think about that and gave us a way to use single quotes within single quotes. All you need to do is "escape" the inner single quotes by putting a \ right before the '

it goes like this: you want to write this:

div.html(<span style='font-size:32.0pt;line-height:115%;font-family:"Segoe UI","sans-serif";color:#808080'>Simple Quotes within Simple Quotes ! </span>', true);

but it doesn't work :(

//

Now you replace all the inner "'" by "\'" like this

div.html(<span style=\'font-size:32.0pt;line-height:115%;font-family:"Segoe UI","sans-serif";color:#808080\'>Simple Quotes within Simple Quotes ! </span>', true);

tadaaaaa ! it works

cheers

ps: I guess you figured out that I wrote this post so that it contains all the such terms that I tried on Google in order to try to make it a quick response for anyone who will stumble on the same time wasting problem :) And I wish it is fine with the forum rules