2013-03-11 3 views
17

Почему я получаю эту ошибку и как ее можно проверить, чтобы она не ломалась, я пробовал проверять значение null, но, очевидно, это не работает, спасибо.JQuery Ошибка синтаксиса, непризнанное выражение:

Пожалуйста, не совет, чтобы не писать идентификатор, как это, поскольку я знаю его неправильно, но это возможность.

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

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

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

ответ

35

JQuery использует этот код для обнаружения селектора на основе ID:

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

Это регулярное выражение не выполняется для "''''''\"\"\"\"'''''''''''''\"#####$'''''" или более просто для "'".

Механизм запросов ограничен, что неудивительно для столь сжатых правил языка и правил идентификации так слабых. он не может обрабатывать какой-либо действительный идентификатор.

Если вам действительно нужно, чтобы быть в состоянии обрабатывать любой вид действительного идентификатора, используйте

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

В самом деле, вы никогда не должны использовать $('#'+id) как это просто добавляет бесполезный (и немного опасный) слой разбора для той же операции.

+1

Хэши, способные ускользнуть, также могут помочь. – VisioN

+0

@VisioN Этого было бы недостаточно. –

+1

Спасибо, dystroy, это потрясающее решение –

8

Если я понял ваш вопрос, у вас есть идентификатор, содержащий специальные символы. Вы в основном need to escape them поэтому они рассматриваются как обычные символы, а не селекторов запросов:.

Чтобы использовать любой из мета-символов (например, "# $% &«() * +,/:; < =>? @ []^`{|} ~) Как литеральная часть имени, она должна быть выполнена с двумя обратными косыми чертами: \. Например, элемент с 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> 

Edit: Конечно, ответ dystroy в -omit выбора двигателя Jquery и использовать 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 

Браузеры пока не поддерживают, но есть библиотека polyfill, что вы можете использовать в то же время: https://github.com/mathiasbynens/CSS.escape

Я использовал его с успехом в моем проекте.

Смежные вопросы