Databases
StackOverflow2013
Postsdbo
POtypeahead bootstrap + play framework - Why do I need to HTML encode single quote characters in JSON being passed to HTML?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POtypeahead bootstrap + play framework - Why do I need to HTML encode single quote characters in JSON being passed to HTML?
    text
    copied!<h1>Storytime</h1> <p>In Play's templating scheme, I have this simplified setup:</p> <pre><code>@(param:String) &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;&lt;!-- JQuery &amp; Bootstrap css+js includes --&gt;&lt;/head&gt; &lt;body&gt; @param &lt;input type="text" data-provide="typeahead" data-source='@Html(param)' data-items="4"&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The @Html() is mentioned <a href="https://stackoverflow.com/questions/15318819/escaping-html-in-a-java-play-framework-scala-template">here</a> and the bottom of <a href="http://www.playframework.com/documentation/2.0/ScalaTemplates" rel="nofollow noreferrer">here</a> and basically prevents characters like <code>&lt;</code> from being replaced with <code>&amp;lt;</code>. I'm attempting to pass in a <code>Json.stringify</code>-ed and <code>Json.toJson</code>-ed <code>List[String]</code> that I get from my database into the HTML through Play's template engine, and then have Bootstrap pick it up automatically from the <code>data-source</code> attribute. <br><br></p> <p>Say @param evaluates to a JSON object that contains a string with a <code>'</code>:</p> <pre><code>&lt;input data-provide="typeahead" data-source='["can't","hi","boom"]' data-items="4" type="text" &gt; </code></pre> <p><br> I realized that the single quote characters needed to be escaped in my data-source JSON object. At first I experimented with using <code>\</code> and even <code>\\\</code> to no avail. I even set out to write a regex replacer for the task to emulate the addSlashes() mentioned <a href="https://stackoverflow.com/questions/5764679/guide-to-proper-escaping-in-play-framework">here</a> </p> <p>Then on a whim...</p> <pre><code>&lt;input data-provide="typeahead" data-source='["can&amp;#x27;t","hi", "boom"]' data-items="4" type="text" &gt; </code></pre> <p>Everything works normally now! (when the data-source is hardcoded. Still need to figure out how to unescape @Html() so that <code>&amp;#x27;</code> doesn't disappear.)</p> <p><br></p> <h1>Question</h1> <p>Why does Bootstrap Typeahead need to read in the data-source with the single-quote characters unescaped?</p> <p><br><br><br><br></p> <h2>For posterity:</h2> <pre><code>val quoteRegex = """'""".r quoteRegex.replaceAllIn(str, m =&gt; "&amp;#x27;") </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload