typeahead bootstrap + play framework - 为什么我需要将HTML中的单引号字符编码传递给HTML？ [英] typeahead bootstrap + play framework - Why do I need to HTML encode single quote characters in JSON being passed to HTML?
问题描述
Storytime
在Play的模板化方案中，我有这个简化的设置：
@（param：String）
<！DOCTYPE html>
< html> < head><！ - JQuery& Bootstrap css + js包括 - >< / head> <身体GT;
@param
< input type =textdata-provide =typeaheaddata-source ='@ Html（param）'data-items =4>
< / body> < / HTML>
提到@Html（）这里和 here ，并且基本上可以防止< 这样的字符替换为& lt; 。我试图传入 Json.stringify -ed和 Json.toJson -ed 通过Play的模板引擎从我的数据库中获取[String] ，然后让Bootstrap自动从 data-source 属性。
说@param求值为一个JSON对象，该对象包含一个字符串，其中包含一个'
$ $ p $ < input data-provide =typeaheaddata-source ='[can not， hi，boom]'data-items =4type =text>
我意识到单引号字符需要在我的数据中转义源JSON对象。起初，我尝试过使用 \ 甚至 \\\\ 无济于事。我甚至着手编写一个正则表达式替换器来模拟addSlashes（）提到的在这里
然后随心所欲......
< input data-provide =typeaheaddata-source ='[can&＃x27; t，hi，boom]'data-items =4type =text>
现在一切正常！ （当数据源被硬编码时，仍然需要弄清楚如何使用@Html（），这样&＃x27; 不会消失。）
问题
为什么Bootstrap Typeahead需要在单引号字符未转义的情况下读取数据源？
为后人：
val quoteRegex ='.r
quoteregex.replaceAllIn（str，m =>&＃x27;）
单引号的问题是它会截断您的数据源属性。 html解析器将会读取你的html并给你类似于
< input data-provide =typeaheaddata- source ='[can't，hi，boom]'data-items =4type =text>
并且您的数据源属性值将为 [can can 。所以这个问题不是typeahead。
当你编码单引号时，它不再打破属性，编码引号被添加到dom unncoded，所以你得到'而不是&＃x27;
Storytime
In Play's templating scheme, I have this simplified setup:
@(param:String)
<!DOCTYPE html>
<html> <head><!-- JQuery & Bootstrap css+js includes --></head> <body>
@param
<input type="text" data-provide="typeahead" data-source='@Html(param)' data-items="4">
</body> </html>
The @Html() is mentioned here and the bottom of here and basically prevents characters like < from being replaced with <. I'm attempting to pass in a Json.stringify-ed and Json.toJson-ed List[String] that I get from my database into the HTML through Play's template engine, and then have Bootstrap pick it up automatically from the data-source attribute.
Say @param evaluates to a JSON object that contains a string with a ':
<input data-provide="typeahead" data-source='["can't","hi","boom"]' data-items="4" type="text" >
I realized that the single quote characters needed to be escaped in my data-source JSON object. At first I experimented with using \ and even \\\ to no avail. I even set out to write a regex replacer for the task to emulate the addSlashes() mentioned here
Then on a whim...
<input data-provide="typeahead" data-source='["can't","hi", "boom"]' data-items="4" type="text" >
Everything works normally now! (when the data-source is hardcoded. Still need to figure out how to unescape @Html() so that ' doesn't disappear.)
Question
Why does Bootstrap Typeahead need to read in the data-source with the single-quote characters unescaped?
For posterity:
val quoteRegex = """'""".r
quoteRegex.replaceAllIn(str, m => "'")
The problem with the single quotes is that it truncates your data-source attribute. The html parser is going to read your html and give you something like
<input data-provide="typeahead" data-source='["can' t","hi","boom"]' data-items="4" type="text" >
and your data-source attribute will have a value of ["can. So the problem isn't typeahead.
When you encode the single quote it no longer breaks the attribute and the encoded quote is added to the dom unencoded so you get the ' instead of '
这篇关于typeahead bootstrap + play framework - 为什么我需要将HTML中的单引号字符编码传递给HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
