Analyser une chaîne HTML pour obtenir le contenu des éléments avec Javascript

J'ai la chaîne de caractères qui contient plusieurs éléments:

'<span class="fn" id="fn1">Matthew</span>
<span class="spouse" id="spouse1">Evelyn Ross</span>
<span class="bday" id="bday1">1456</span>
<span class="wday" id="wday1"></span>
<span class="dday" id="dday1">2000</span>'

Quelle serait la meilleure façon d'analyser ce à 5 variables?

MODIFIER

Pour plus de clarté, voici le code complet, je me suis créer un type de données d'entrée pour jEditable qui me permet de inline modifier un fichier vcard.

   $.editable.addInputType('person', {
element : function(settings, original) {     
var fn  = $('<input id="fn_"/>');
var bday  = $('<input id="bday_" />');
var wday  = $('<input id="wday_" />');
var dday  = $('<input id="dday_" />');
var spouse  = $('<input id="spouse_" />');
$(this).append(fn);
$(this).append(bday);
$(this).append(wday);
$(this).append(dday);
$(this).append(spouse);
/* Hidden input to store value which is submitted to server. */
var hidden = $('<input type="hidden">');
$(this).append(hidden);
return(hidden);
},
content : function(string, settings, original) {
var $data = $(string);
var data = {};
$data.each(function () {
var $t = $(this);
data[$t.attr('id')] = {
class: $t.attr('class'),
value: $t.text()};
});
alert(data.length());
$("#fn_", this).val('Name');
$("#bday_", this).val('Born');
$("#wday_", this).val('Married');
$("#dday_", this).val('Died');
$("#spouse_", this).val('Spouse');
},
submit: function (settings, original) {
var value =  "<span class=fn>" + $("#fn_").val() + '</span>' + '<span class=spouse>' + $("#spouse_").val() + '</span>' + '<span class=bday>' + $("#bday_").val() + '</span>' + '<span class=wday>' + $("#wday_").val() + '</span>' +'<span class=dday>' + $("#dday_").val() + '</span>';
$("input", this).val(value);
}
});
pourquoi voulez-vous stocker dans cinq variables??? vous avez .html de jquery qui obtient la totalité du code html..
Eh bien, j'ai juste besoin d'obtenir 5 valeurs séparées par ID. Désolé, si vous ne l'avez pas deviné, je suis nouveau sur ce genre de choses!

OriginalL'auteur Chris Armstrong | 2010-12-04

  1. 6

    Créer un élément, cet élément avec innerHTML et les sélectionner avec querySelector.

    Donc, en supposant que vous vouliez l'utiliser juste un bon vieux js:

    el = document.createElement('p');
el.innerHTML = '<span class="fn" id="fn1">Matthew</span> ... <span class="dday" id="dday1">2000</span>'
el.querySelector('.fn').innerText //= 'Matthew'
el.querySelector('#fn1').outerHTML //= "<span class="fn" id="fn1">Matthew</span>"

    Qui se traduit presque directement dans jQuery:

    el = $('<p />').html('<span class="fn" id="fn1">Matthew</span> ... <span class="dday" id="dday1">2000</span>');
el.find('.fn').text() //= 'Mathew'
    En supposant que c'est du javascript dans un navigateur.
    Ah n'ai pas noté le jquery tag.

    OriginalL'auteur Jakub Hampl

  2. 2

    D'abord trouver les éléments puis saisir les données de chaque élément à l'aide d'une combinaison de attr() et texte() ou html().

    Vous pouvez trouver les éléments en utilisant l'habitude sélecteur chaîne ou la chaîne brute que vous avez mentionné dans la question.

    var target_string = # ... raw string or selector for '#interesting span'
var $data = $(target_string);
# adjust this to produce the format you want
var data = {};
$data.each(function () {
var $t = $(this);
data[$t.attr('id')] = {id: $t.attr('id'),
class: $t.attr('class'),
value: $t.text()};  # or .html()
});
# you can access this example data via the id values in the html
data['spouse'] # or
data.spouse
    Merci, j'ai essayé de mise en œuvre (voir édité mon post ci-dessus), mais il semble être de retour vide. Comme je le comprends, je suis en création d'une matrice appelle de données, puis de la recherche par le biais de la chaîne pour les éléments et entrer dans le tableau?
    Dans mon exemple, data est un objet/dictionnaire pas un tableau. data.length sera de retour indéfini. values(data) retourne un tableau de valeurs. Vous pouvez aussi consulter la keys(data). C'est la partie où vous avez besoin d'ajuster la mise en forme de data pour s'adapter à votre espace de problème ;^)
    merci, mais quand j'essaye de valeurs(données), les données.les valeurs de (), il vient encore comme indéfini. Quelque chose doit m'échapper...
    Si vous ne l'avez pas déjà installé, sortir et installer Firebug pour Firefox. La console dans d'autres navigateurs fonctionne également, mais Firebug semble fonctionner le mieux pour moi. Ensuite, copiez et collez l'exemple de code dans la console. Mise à jour le target_string et de l'exécuter. Aussi, puisque vous êtes juste de commencer avec javascript, essayez de lire un sur la langue un peu. Douglas Crockford peut aider ici, javascript.crockford.com/code.html
    Merci, j'ai utiliser l'inspecteur de Chrome. Je vais balayer vers le haut sur mon JS!

    OriginalL'auteur istruble

  3. 0

    À l'aide de jQuery, découvrez texte()

    //get text from all spans
var all_text = $('span').text();
//break out into an array of values
var values = all_text.split(' ');

    NOTE cette obtiendrez le texte pour tous span tags sur la page. Si vous voulez faire une meilleure sélection et probablement attribuer cela à des variables dans une meilleure façon que split().

    .le texte ne reçoit que du texte, des .html vous obtient le html

    OriginalL'auteur Jason McCreary

  4. 0

    Utilisation de jQuery .html.
              

    OriginalL'auteur kobe