Разобрать строку HTML, чтобы получить содержимое элементов с помощью Javascript - PullRequest
Новая
       14

Разобрать строку HTML, чтобы получить содержимое элементов с помощью Javascript

2 голосов
/ 04 декабря 2010

У меня есть следующая строка, которая содержит несколько элементов: 

'<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>'

Каков наилучший способ разобрать это на 5 переменных?

EDIT

Для ясности, вот полный код, я создаю пользовательский тип ввода для jEditable, который позволяет мне встроенным редактировать 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);
  }

});

Ответы [ 4 ]

6 голосов
/ 04 декабря 2010

Создайте элемент, поместите его в этот элемент с помощью innerHTML и выделите их с помощью querySelector.

Итак, если вы хотите использовать просто старый 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>"

Что переводит почти прямо в jQuery: 

el = $('<p />').html('<span class="fn" id="fn1">Matthew</span> ... <span class="dday" id="dday1">2000</span>');
el.find('.fn').text() // = 'Mathew'
2 голосов
/ 04 декабря 2010

Сначала найдите элементы, затем извлеките данные из каждого элемента, используя комбинацию attr () и text () или html () .

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

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
0 голосов
/ 04 декабря 2010

Используйте jQuery's .html.

0 голосов
/ 04 декабря 2010

Используя jQuery, проверьте text () 

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

ПРИМЕЧАНИЕ это позволит получить текст для всех тегов span на странице. Поэтому вы захотите сделать лучший селектор и, вероятно, назначить его переменным лучше, чем split().

...