web-dev-qa-db-ja.com

JavaScriptを使用したHTML5データ属性の引用符のエスケープ

JQueryの.data()を使用して、カスタムHTML5データ属性を操作します。属性の値には、一重引用符と二重引用符の両方を含める必要があります。

_<p class="example" data-example="She said "WTF" on last night's show.">
_

データ属性値に_&quot;_のような文字コードを使用すると、上記の動作が可能になることはわかっていますが、値の入力方法を常に制御できるとは限りません。さらに、次のように、マークアップでHTMLタグを使用できるようにする必要があります。

_<p class="example" data-example="
She said "<abbr title="What The F***">WTF</abbr>" on last night's show.
">
_

何らかの形式の.replace()が答えである場合、値が.data()によって読み取られる前に実行する必要があります。多分_<body>_全体に適用することにより、

_<abbr title="te\'st">WTF</abbr>_のような通常のバックスラッシュエスケープも機能しません。

理想的には、これは両方で動作する柔軟性を持っています：

_data-example="..."_および_data-example='...'_

しかし、それが一方向にしかできない場合は、少なくともそれを使って転がすことができます。アイデア？

Update-もう少しコンテキスト：

私は responsejs.com のためにこれに取り組んでいます。これの実際のアプリケーションは、特定の幅を超えるブラウザーのサイドバーのみをロードすることです（これはPHPではなくブラウザーで処理されます）。 WordPressの場合、たとえば、サイドバーにウィジェットや画像などを含めることができます。PHPタグ内の引用符は、問題ではありませんb/cブラウザに到達する前にHTMLに解析されます。例：

_<aside id="primary" class="sidebar" 

        data-oweb=' 

            <?php dynamic_sidebar( 'primary' ); ?>

        '
    >

    optional default markup for mobile and no-js browsers here

</aside>
_
javascriptjqueryhtmlescapingquotes
30
ryanve

それを回避する方法はありません。値を適切にエスケープする必要があります。そうしないと、HTMLを適切に解析できません。コードが解析された後は、JavaScriptを使用してコードを修正することはできません。コードが既に失敗しているためです。

適切なHTMLエンコードを使用した例は次のとおりです。

<p class="example" data-example="She said &quot;&lt;abbr title=&quot;What The F***&quot;&gt;WTF&lt;/abbr&gt;&quot; on last night's show.">

バックスラッシュはJavascriptコードではないため、文字をエスケープするために使用することはできません。 HTMLエンティティを使用して、HTMLコードの文字をエスケープします。

データの入力方法を制御できない場合は、失敗しています。あなたは単にそれを制御する方法を見つけなければなりません。

28
Guffa

EncodeURIを使用して、JSONオブジェクト内の引用符をエスケープします。文字列をdecodeURIで解析します。

var popup = document.getElementById('popup'),
    msgObj = JSON.parse(decodeURI(popup.dataset.message));

console.log(msgObj);
<a id="popup" href="#" data-message="%7B%22title%22:%22Print%22,%22message%22:%22Printing%20not%20yet%20implemented%22%7D" />
3
Dan Smith

それらが"および'などのHTML文字列である必要がある場合は、それらのHTML要素を個別に作成しないでください： http://jsfiddle.net/N7XXu/ 。

例えば。 HTML：

<p class="example" data-which="1">a</p>

<p class="example-data" data-which="1">She said "<abbr title="What The F***">WTF</abbr>" on last night's show.</p>

次のJavaScriptと組み合わせて：

$('.example').each(function() {
    var correspondingElem = $('.example-data[data-which="'
                              + $(this).data('which')
                              + '"]');
    $(this).data('example', correspondingElem.html());
});

alert($('.example').data('example'));

もちろん、.example-data要素を非表示にします。

3
pimvdb

適切なhtmlになるためには、面倒な文字をエスケープする必要があります。 HTMLエンティティでエスケープします。これは、この情報を入力するために使用されているツールは、それらを適切に保存する必要があるか、バックエンドで取得するツールがエスケープする必要があることを意味します。

次に、それらをJSで使用する場合は、いくつかの検索および置換関数を実行して、文字をHTMLと引用符に戻す必要があります。

ほとんどのバックエンド開発言語には、ある種の「htmlescape/unescape」機能があるため、難しくありません。

JQueryを介してエスケープを解除するには、簡単なGoogleを介して次のように検索します： http://www.naveen.com.au/javascript/jquery/encode-or-decode-html-entities-with-jquery/289

1
DA.

これは、htmlのエンコードに使用できる簡単なツールです。

トリックは、それを2回エスケープすることです。

Text（）によって破棄されるため、複数行のテキストを保持するために、追加の\ n置換を追加しました。

さらに、データ属性に対して安全にするために引用符をエスケープする必要があります。

<div id="esc"></div>
<textarea id="escinput" placeholder="Enter text"></textarea>
<script>
    $("#escinput").bind("change paste keyup", function(){
        $("#esc").text($(this).val().replace(/\n/g,'\\n'));
        $("#esc").text($("#esc").html().replace(/"/g, '&quot;'));
    });            
</script>

これにより、データ属性の安全な文字列が作成されます。

ここでテストできます： http://jsfiddle.net/SplicePHP/n6HFq/

デコードしてhtmlに戻すには、次のコマンドを使用します。

<script>
    var attr = $("#idOfElement").data('attribute');
    var decoded = $('<textarea/>').html(attr).val();
</script>
1
Dieter Gribnitz

Data属性を使用してhtml要素と一緒にいくつかのデータをPHPからJavaScriptに転送するため、バックエンドで_base64_encode_を使用し、クライアント側でbase64Decode(input)を使用してデータを取り戻します。こうすることで、すべての乱交を回避できます。使用するJavasScriptコードはここにあります http://www.webtoolkit.info/

1
user7006253

少しトリッキーですが、単一引用符を含むdata属性を持つdomオブジェクトを選択できます。トリックは\\'

<div id="text" data-message="Stanley Kubrick's Oranges">Hello</div>

<script>
    var message = "Stanley Kubrick\\'s Oranges";
    $("#text[data-message='"+message+"']").fadeOut("slow");
</script>

フィドル

1
kastelli

私はデータを直接JavaScriptに保存するのが好きです。これの代わりに：

<p class="example" data-oweb="<?=str_replace('\'', '\\\'', $var)?>">Content</p>
<script>
  var example = $('.example').data("example");
  DoSomething(example);
</script>

これを行う：

<p class="example">Content</p>
<script>
  var example = '<?=str_replace('\'', '\\\'', $var)?>';
  DoSomething(example); 
</script>

または、ユーザーが制御するリモートスクリプトで使用する場合は、値をグローバルに保存します。

<p class="example">Content</p>
<script>
  window.MyDataValues={};
  window.MyDataValues.Example = '<?=str_replace('\'', '\\\'', $var)?>';
</script>

または、リモートスクリプトを制御できず、情報をデータ属性として保存する必要がある場合は、段落をターゲットにする方法を見つけた後、JavaScriptで設定できます。

<p id="example" data-oweb>Content</p>
<script>
    document.getElementById("example");
    element.dataset.oweb = '<?=str_replace('\'', '\\\'', $var)?>';
</script>
0
Nenotlep

Stack Overflowの新機能なので、投票するのに十分な担当者がいませんが、@ Guffaが受け入れた回答を誤解したため、解決策を明確にしたいと思いました。

HTML5データ属性のエスケープ/特殊文字に関して同様の質問がありました。質問/解決策： ユーザー入力からHTML5データ属性へのエスケープ/特殊文字をURLエンコード/デコードを使用して

Dan Smithは、encodeURI（）/ decodeURI（）で使用したソリューションを提供しました。しかし、それは1レップポイントしかなかったため、最初は却下しました。

手動で文字をエスケープすることによる答えは、面倒で時間がかかります。

Escape（）メソッドでの回答はすべて非推奨になりました。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape

0
CreatordotJS