Как выделить данные из HTML документа и подставить их в JavaScript?

Question

[kiberkot]

Прошу подсказать знающих людей.
Имеется внешний сайт на котором присутствует данные в формате

<div>MMR: <span class="value">1582.21</span></div>
<div>Matches: <span class="value">1580</span></div>
<div>Wins: <span class="value">796</span>

Можно ли обработать эти данные на javascritp, загнав значения в переменные?

Comments

[kiberkot]

Как-нибудь так:

values[0]="1582.21";
values[1]="Рязань";
values[2]="1580";
values[3]="796";

[pxx]

И всё-таки было бы понятнее, если бы было указано, в каком виде получается этот внешний HTML, а также контекст задачи. У меня есть подозрение, что не нужно ее решать на клиенте.

[kiberkot]

Что понимается под видом мне не совсем понятно, а контекст задачи — создание виджета для windos.

Answer 1

[Andrew D.Laptev]

Если можно использовать jquery, то как-то вот так:

var values = [];
$('span.value').each(function(){values.push($(this).text())});
values.push('Рязань');

На чистом javascript'е будет чуть посложнее.

Comments

[Andrew D.Laptev]

А вот и чистый javascript, с поддержкой IE, где нет getElementsByClassName:

var values = [], i, elements = document.getElementsByTagName('span');
for (i = elements.length; i--;) {
    if (elements[i].className === 'value') {
        values.push(elements[i].innerHTML);
    }
}

Answer 2

[Sergey]

На «чистом» javascript'e это не сложнее, единственное что придется сделать у каждого span'a ID:

var span1 = document.getElementById("spanId1");
window.alert(span1.innerHTML);

Comments

[Сергей Протько]

Незачем, достаточно по getElementByName найти все спаны и проверить у них атрибут класса

Answer 3

[pxx]

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

var data = {};
var values = $('#parent .value');
data.MMR = values[0].html();
data.matches = values[1].html();
data.wins = values[2].html();

Если не известен порядок, но известно, какие значения ожидаются, можно по текстам ловить:

data.MMR = $("div:contains('MMR:') .value").html();

Comments

[pxx]

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

Если страница на том-же домене или она не против кросс-доменных запросов, то можно получить ее так:

$.get("somePage.html", function(rawHTML) {
  var htmlDOM = $(rawHTML);
  htmlDOM.find('#parent .value')...
  ...
});

Если нет, то нужно будет использовать на своем сервере небольшой прокси для выдергивания внешней страницы. Например:

$.get("http://mydomain/proxy.php?externalURL=" + encodeURIComponent("http://externalDomain/somePage.html"), ...

Если же rawHTML уже неким образом присутствует, то убирайте обертку $.get