Capturer le contenu de <select>

Question

Je suis en train d'utiliser une expression régulière pour capturer le contenu de toutes les valeurs d'option, dans un élément HTML select

Par exemple, dans:

<select name="test"> 
<option value="blah">one</option> 
<option value="mehh">two</option> 
<option value="rawr">three</option> 
</select> 

I'D tiens à capturer un deux et trois dans un tableau.

Mon code actuel est

var pages = responseDetails.responseText.match(/<select name="page" .+?>(?:\s*<option .+?>([^<]+)<\/option>)+\s*<\/select>/); 

for (var c = 0; c<pages.length; c++) { 
    alert(pages[c]); 
} 

Mais il ne capture que la dernière valeur, dans ce cas, "trois". Comment puis-je modifier ceci pour les capturer tous?

Merci!

Answer 1

cela est déjà fait pour vous dans le code HTML DOM

var myselectoptions = document.getElementByName("test").options; 

for (var i = 0; i <= myselectoptions.length; i ++) { 
    alert(myselectoptions[i].text); 
    alert(myselectoptions[i].value); 
} 

Fondamentalement, ce code permettra de saisir le texte et la valeur d'un tableau à partir du HTML DOM et alerter chaque valeur pour vous.

Here is a link pour une documentation sur les éléments de sélection .Options

Answer 2

Même si vous avez seulement le texte HTML, vous pouvez toujours utiliser le DOM pour l'analyser. Par exemple, en utilisant un élément temporaire pour injecter le code HTML et parcourir les options:

function extractOptions(html) { 
    var el = document.createElement('div'), // temporary element 
     result = [], select, option; 

    el.innerHTML = html; // inject html 
    select = el.getElementsByTagName('select')[0]; // get the first select element 

    for (var i = 0, n = select.options.length; i < n; i++) { // loop options 
    option = select.options[i]; 
    result.push({value: option.value, text: option.innerHTML}); 
    } 
    return result; 
} 

// assuming that text contains the HTML string as in your example 

var options = extractOptions(text); 

// [{"value":"blah","text":"one"}, 
// {"value":"mehh","text":"two"}, 
// {"value":"rawr","text":"three"}] 

Vérifiez l'exemple ci-dessus here.

Answer 3

Il n'y a pas de moyen multi-navigateur pour faire cela avec seulement des expressions régulières. Cependant, voici une sorte d'approche farfelue (supporter avec moi pour une minute d'explication).

La méthode String.replace de JavaScript peut accepter une fonction comme remplacement, au lieu d'une chaîne de format. La fonction est évaluée pour chaque match de la regex complète, donc vous pouvez (ab) utiliser cette fonctionnalité pour faire quelque chose d'arbitraire à chaque match. Voici un exemple qui ajouterait each select à un tableau:

var matches = []; 
var selectPattern = /<option .+?>([^<]+)<\/option>/; 
body.replace(selectPattern, function(match) { 
    matches.push(match); 
}); 

Je pense que l'aide d'un noeud DOM caché serait préférable pour cela (see also) mais parfois une approche « alternative » est amusant :)

Answer 4

Tout sur le submatch en javascript. Pour votre chaîne, regexp est simple

/>(\w+)</ 

Maintenant, nous pousser dans un tableau sous-correspondances,

var matches = []; 
var str = '<option value="blah">one</option><option value="mehh">two</option><option value="rawr">three</option>'; 

var tmp; 

do { 
    tmp = str; 
    str = str.replace(/>(\w+)</,function($0,$1){ 
     matches.push($1);   
     return $0.replace($1,""); 
    }); 

} while(tmp!=str); 

alert(matches);