2013-03-11 28 views
17

なぜこのエラーが発生し、どのようにしてテストすることができないので、壊れていないことを確認しました。Jquery Syntax error、unrecognized expression:

私は間違ったことを知っているので、このようなIDを書かないようにアドバイスしないでくださいが、それは可能です。この正規表現は、単に"'"ため"''''''\"\"\"\"'''''''''''''\"#####$'''''"以上失敗

characterEncoding = "(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+" 
... 
"ID": new RegExp("^#(" + characterEncoding + ")"), 

var jsonTest = [ 
    { 
    "myId": "''''''\"\"\"\"'''''''''''''\"#####$'''''", 
    } 
]; 

alert(jsonTest[0].myId); 
// Works - alerts the myId 

$('#' + jsonTest[0].myId).length; 
// Error: Syntax error, unrecognized expression: 
// #''''''""""'''''''''''''"#####$''''' 

答えて

35

jQueryのは、IDベースのセレクタを検出するために、このコードを使用します。

クエリエンジンが制限されています。これは、非常に簡潔な言語とIDの妥当性規則があまりにもゆるやかであるため、あまり驚くことではありません。有効なIDは処理できません。それは単に役に立たない(と少し危険な)構文解析の層を追加するよう

あなたが本当に事実

$(document.getElementById(jsonTest[0].myId)) 

を使用し、有効なIDのいずれかの種類を扱うことができるようにする必要がある場合は、$('#'+id)を使用しないでください同じ操作のために。

+1

ハッシュエスケープも役立ちます。 – VisioN

+0

@ VisioNそれでは不十分です。 –

+1

ありがとうdystroyそれは素晴らしい解決策です –

8

私はあなたの質問を理解した場合、あなたには特殊文字を含むIDがあります。あなたは基本的need to escape themので、それらがリテラル文字ではなく、クエリのセレクタとして扱われている:!。

を、このような などのメタ文字(のいずれかを使用するには、「#$は%&「()* +、/ :; =>?@ []^`{|}〜)は、名前のリテラル部分として、 を2つのバックスラッシュでエスケープする必要があります:\ id =" foo.bar "

。セレクタ$(「#fooというの\の.BAR」)を使用して...と、このケースでは、あなたはまた、ストリング区切り、"のための追加のエスケープレベルを必要とする。それはクレイジーだけど目

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title></title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"><!-- 
jQuery(function($){ 
    console.log($("#" + "\\'\\'\\'\\'\\'\\'\\\"\\\"\\\"\\\"\\'\\'\\'\\'\\'\\'\\'\\'\\'\\'\\'\\'\\'\\\"\\#\\#\\#\\#\\#\\$\\'\\'\\'\\'\\'").length); 
}); 
//--></script> 
</head> 
<body> 

<div id="''''''&quot;&quot;&quot;&quot;'''''''''''''&quot;#####$'''''">Foo</div> 

</body> 
</html> 

編集:作品ですもちろん、dystroyの答えは、jQueryの選択エンジンを-omitとgetElementByID()を使用する - 方法がより実用的です。 jQueryのこのおよびその他の関連技術をカバーして手動links an interesting blog entry

のdocument.getElementById()と document.getElementsByClassName(のような同様の機能)は、単にエスケープされていない属性 値、それはHTMLで使われている方法を使用することができます。もちろん、有効なJavaScript 文字列で終わるように、 に引用符をエスケープする必要があります。

1

W3Cはこれに新しい機能を定義しました:CSS.escape()。あなたのコード例では、それは次のようになります。

var jsonTest = [ 
    { 
    "myId": "''''''\"\"\"\"'''''''''''''\"#####$'''''", 
    } 
]; 

$('#' + CSS.escape(jsonTest[0].myId)).length; // Works 

ブラウザはまだそれをサポートしていませんが、あなたは平均時間で使用することができますポリフィルライブラリがあります: https://github.com/mathiasbynens/CSS.escape

私はしました私のプロジェクトで成功を収めた。