1

ストーリータイム

Play のテンプレート スキームでは、次のような単純化されたセットアップを使用しています。

@(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>

@Html() はこことここの一番下に記載されており、基本的に のような文字<が に置き換えられるのを防ぎ&lt;ます。Json.stringifyデータベースから取得した-ed とJson.toJson-edList[String]を Play のテンプレート エンジンを介して HTML に渡し、Bootstrap にdata-source属性 から自動的に取得させようとしています。

@param が次の文字列を含む JSON オブジェクトに評価されるとします'。

<input data-provide="typeahead" data-source='["can't","hi","boom"]' data-items="4" type="text" >


データソースの JSON オブジェクトで一重引用符をエスケープする必要があることに気付きました。最初は使っ\てみましたが、うまくいき\\\ませんでした。ここで言及されている addSlashes() をエミュレートするタスクの正規表現の置き換えを作成することさえ試みました。

すると、ひょんなことから…

<input data-provide="typeahead" data-source='["can&#x27;t","hi", "boom"]' data-items="4" type="text" >

すべてが正常に動作するようになりました！(データソースがハードコードされている場合。 @Html() をエスケープ解除&#x27;して消えないようにする方法を理解する必要があります。)


質問

Bootstrap Typeahead は、一重引用符をエスケープせずにデータソースを読み込む必要があるのはなぜですか?





後世のために：

val quoteRegex = """'""".r
quoteRegex.replaceAllIn(str, m => "&#x27;")
4

1 に答える 1

1

一重引用符の問題は、データ ソース属性が切り捨てられることです。HTML パーサーは HTML を読み取り、次のような結果を返します。

<input data-provide="typeahead" data-source='["can' t","hi","boom"]' data-items="4" type="text" >

また、 data-source 属性の値は になり["canます。したがって、問題はタイプアヘッドではありません。

一重引用符をエンコードすると、属性が壊れなくなり、エンコードされた引用符がエンコードされていない dom に追加されるため、'代わりに&#x27;

于 2013-06-14T04:19:17.143 に答える