sélecteur jQuery valeur échapper

J'ai une liste déroulante qui contient une série d'options:

<select id=SomeDropdown>
  <option value="a'b]&lt;p>">a'b]&lt;p></option>
  <option value="easy">easy</option>
<select>

Avis que la valeur de l'option/texte contient des trucs méchants:

  • guillemets simples
  • crochet de fermeture
  • échappé html

J'ai besoin de retirer de l'a'b]<p> option mais j'ai pas de chance écrit le sélecteur. Ni:

$("#SomeDropdown >option[value='a''b]&lt;p>']");

ou

$("#SomeDropdown >option[value='a\'b]&lt;p>']");

sont de retour l'option.

Quelle est la bonne façon d'échapper à des valeurs lors de l'utilisation de la "valeur=" sélecteur?

  • L'utilisateur peut entrer quoi que ce soit. Pas probable qu'ils seraient... mais si ils le font alors l'application doit gérer l'entrée correctement.
InformationsquelleAutor user53794 | 2009-04-11
  1. 38

    Je ne pense pas que vous le pouvez. Il devrait être:

    #SomeDropdown >option[value='a\'b]<p>']

    Et cela ne fonctionne pas comme un sélecteur CSS (dans les navigateurs modernes). Exprimé dans un JavaScript littéral de chaîne, vous serait naturellement besoin d'une autre ronde de s'échapper:

    $("#SomeDropdown >option[value='a\\'b]<p>']")

    Mais cela ne fonctionne pas en jQuery, car son sélecteur de parser n'est pas complètement conforme aux normes. Il utilise cette expression pour analyser les value le cadre d'un [attr=value] condition:

    (['"]*)(.*?)|)\s*\]

    \3 étant le groupe contenant de l'ouverture des guillemets, qui bizarrement sont autorisés à être ouverture de plusieurs citations, ou pas de l'ouverture des guillemets à tous. L' .*? alors peut analyser n'importe quel caractère, y compris des citations jusqu'à ce qu'il frappe le premier ‘]’ caractère, se terminant le match. Il n'y a aucune disposition pour la barre oblique inverse d'échappement des CSS de caractères spéciaux, de sorte que vous ne peut pas correspondre à une chaîne de caractères arbitraire de la valeur en jQuery.

    (Une fois de plus, la regex analyseurs de perdre.)

    Mais la bonne nouvelle est que vous n'avez pas à compter sur les sélecteurs jQuery; il y a de très bonnes DOM méthodes que vous pouvez utiliser, en particulier HTMLSelectElement.options:

    var select= document.getElementById('SomeDropdown');
for (var i= select.options.length; i-->0;) {
    if (select.options[i].value=="a'b]<p>") {
        //do something with option
}   }

    C'est de nombreuses fois plus simple et plus rapide que de demander à jQuery laborieusement analyser et de mettre en œuvre de votre sélection, et vous pouvez utiliser n'importe quelle chaîne de valeur vous le souhaitez sans avoir à vous soucier de l'échappement des caractères spéciaux.

    • Je vais proposer cela comme un jQuery alternative à la pure DOM: $('option', '#SomeDropdown').filter(function() { return $(this).val() == "a'b]<p>"; });
    • Votre Réponse est la solution parfaite pour mon cas. Vraiment apprécier pour votre commentaire.
    InformationsquelleAutor bobince
  2. 51

    J'utilise cette fonction pour échapper à des sélecteurs jquery. Il s'échappe en principe, tout était discutable, mais peut être trop agressif. 

    fonction escapeStr(str) 
{ 
if (str) 
retour str.replace(/([ #;?%&,.+*~\':"!^$[\]()=>|\/@])/g,'\\\'); 

return str; 
}
    • Avez-vous testé? Quand je l'ai testé, il met seulement 1 slash avant le méta-caractères. Voici celui que j'ai écrit: str.replace(/([ !"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~])/g,'\\\\$1').
    • en utilisant le code dans la réponse a bien fonctionné pour échapper les caractères spéciaux dans un sélecteur jquery.
    • Vous avez peut-être raison. Les docs m'a trompé. Il dit que vous avez besoin de deux barres obliques, mais l'un est juste pour échapper à la barre oblique dans un JavaScript chaîne, le 2ème est pour échapper au sélecteur CSS.
    • J'ai modifié la regex pour inclure correspondant ?: return str.replace(/([ #;?&,.+*~\':"!^$[\]()=>|\/@])/g,'\\$1');
    • Le pourcentage % signe doit également être échappé.
    InformationsquelleAutor Sam Hendley
  3. 9

    utilisation .filter() avec une fonction personnalisée. txt devrait contenir votre méchant chaîne, ou vous pouvez simplement remplacer indexOf avec toute autre fonction que vous choisissez.

    $("#SomeDropdown option")
   .filter(function(i){
       return $(this).attr("value").indexOf(txt) != -1;
   })
   .remove();
    • Il est difficile de lire l'exemple de code. Veuillez utiliser les nouvelles lignes et de commencer votre prochaine ligne avec huit espaces (pas d'onglets) pour formater votre code afin que les lecteurs n'ont pas à faire défiler.
    • C'est la bonne réponse
    • C'est BEAUCOUP mieux sur les yeux que ce que la purée de regex folie (je ne suis pas regexpert). Cela aussi a été très utile dans la résolution d'un méchant problème. Donc, je pense que cette réponse est beaucoup mieux.
    InformationsquelleAutor brainsucker
  4. 5

    Je trouve que vous pouvez utiliser \ \ pour échapper à des sélecteurs. Pensez à cela comme un \ pour le regex et un à s'échapper de la regex.

    Exemple:

    $(this).find('input[name=user\\[1\\]\\[name\\]]').val();
    • J'ai écrit un .remplacer les regex pour échapper à des sélecteurs pour vous ici
    InformationsquelleAutor Strixy
  5. 3

    Si vous essayez de faire de l'échappement de la programmation, vous avez seulement besoin d'un ensemble de barres obliques. Cela ne fonctionne pas:

    var key = 'user[1][name]';
$(this).find('select[name=' + key + ']');

    Mais ce sera:

    var key = 'user\[1\]\[name\]';
$(this).find('select[name=' + key + ']');

    Et il en sera de ce:

    $(this).find('select[name=user\\[1\\]\\[name\\]]');

    Vous pouvez l'utiliser javascript pour construire correctement échappé sélecteur:

    if(key.indexOf('[') !== -1) {
    key = key.replace(/([\[\]])/g, "\\\");
}

    Voici un JS Fiddle qui montre une partie de ce comportement étrange:

    http://jsfiddle.net/dH3cV/

    InformationsquelleAutor Steve Tauber
  6. 2

    Le problème est dû à des entités HTML; " la&lt;" est vu par le navigateur comme "<".

    La même chose pourrait être dite pour l'exemple fourni par bobince; veuillez noter que le code suivant ne fonctionne pas avec jQuery 1.32 sur Win + FF3:

    var select= document.getElementById('SomeDropdown');
for (var i= select.options.length; i-->0;) {
    if (select.options[i].value=="a'b]&lt;p>") {
        alert('found it');
    }   
}

    Toutefois, la modification de l'entité à un littéral sera en effet de trouver la valeur souhaitée: 

    var select= document.getElementById('SomeDropdown');
for (var i= select.options.length; i-->0;) {
    if (select.options[i].value=="a'b]<p>") {
        alert('found it');
    }   
}

    Bien sûr, il y a un problème ici, que la valeur que vous spécifiez est pas la valeur exacte que vous cherchez. Cela peut également être corrigée avec l'ajout d'une fonction d'assistance:

    function html_entity_decode(str) {
    var decoder = document.createElement('textarea');
    decoder.innerHTML = str;
    return decoder.value;
}

    Tous ensemble: les

    var srcValue = html_entity_decode("a'b]&lt;p>");
var select= document.getElementById('SomeDropdown');
for (var i= select.options.length; i-->0;) {
    if (select.options[i].value == srcValue) {
        alert('found it');
    }   
}

    Tout maintenant, la valeur d'entrée que vous êtes à la recherche d'correspond exactement à la valeur de l'élément select.

    Cela peut aussi être écrite à l'aide de méthodes jQuery:

    var srcValue = html_entity_decode("a'b]&lt;p>");
$($('#SomeDropdown').attr('options')).each(function() {
    if (this.value == srcValue)
    {
        $(this).remove();
    }
});

    Et puis, finalement, comme un plugin, car ils sont si faciles à faire:

    jQuery.fn.removeByValue = function( val )
{
    var decoder = document.createElement('textarea');
    decoder.innerHTML = val;    
    var srcValue = decoder.value;

    $( $(this)[0].options ).each(function() {
        if (this.value == srcValue) {
            $(this).remove();
        }
    });

    return this;
};

$('#SomeDropdown').removeByValue("a'b]&lt;p>");
    InformationsquelleAutor ken
  7. 1

    de jQuery forum a une belle solution pour cela:

    https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/

    Cette version légèrement modifiée de ce qu'ils suggèrent est également nullsafe.

    function jqid (id) {
  return (!id) ? null : '#' + id.replace(/(:|\.|\[|\]|,)/g, '\\\');
}
    InformationsquelleAutor theUtherSide
  8. 1

    En toute sécurité échapper CSS chaîne n'est pas facile et ne peut pas être fait avec une simple regex.

    Vous pouvez utiliser CSS.escape() .

    ce n'est pas supportée par tous les navigateurs, mais un polyfill existent.

    InformationsquelleAutor Yukulélé