Как вытащить данные из текста при помощи JS?

Question

[Valeri Lavrov]

Получаю следующую строку:

{"ddd":
"asfwewer",
"text":
"<tr data-user="12345" data-start="01">
<td class="text-truncate success" style="font-weight:600">543210</td>
<td class="text-truncate" style="font-weight:600">350 S</td>
<td class="text-truncate success" style="font-weight:600">352.00 S</td>
</tr>"
}

Нужно вытащить "350 S" и "352.00 S" и приравнять к var1 и var2 соответственно. Не знаю, как составить маску. Взываю к помощи.

Answer 1

[Bhudh]

ES6:
let [var1, var2] = obj.text.match( /[0-9.]+ S/g );

Old JS:

var result = obj.text.match( /[0-9.]+ S/g ),
    var1 = result[0],
    var2 = result[1];

Comments

[Сергей Соколов]

только [5] и [7]. И всё накроется медным тазиком если что-то поменяется в разметке и появятся другие числа

[Bhudh]

[5] и [7] это если без ' S'.

[Сергей Соколов]

Bhudh, а, точно. А вдруг вместо S ещё что-то бывает..

[Bhudh]

Сергей Соколов, ну попросили с S, а там пусть сам решает, что у него ещё бывает.

Answer 2

[Сергей Соколов]

Можно создать HTML элемент из разметки, и вытащить оттуда данные:

function getData(html) {
  var table = document.createElement('table');
  table.innerHTML = html;
  var tds = table.querySelectorAll('td');
  var values = [], i;
  for(i=0; i<tds.length; i++)
    values.push(tds[i].innerText);

  return values;
}

var html = [
 '<tr data-user="12345" data-start="01">'
,'<td class="text-truncate success" style="font-weight:600">543210</td>'
,'<td class="text-truncate" style="font-weight:600">350 S</td>'
,'<td class="text-truncate success" style="font-weight:600">352.00 S</td>'
,'</tr>'
].join('\n');

var values = getData( html);

var var1 = values[1]; // 350 S
var var2 = values[2]; // 352.00 S

Comments

[Александр Таратин]

Сергей Соколов document.createElement('table');
Вот вместо этого гораздо лучше использовать https://developer.mozilla.org/ru/docs/Web/API/DOMParser
важное функциональное отличие в том, что не будут грузиться внешние стили/скрипты/медиа элементы и прочая лабуда встречающаяся в разметке.

tds.forEach

Поддержка forEach для nodelist так себе
https://developer.mozilla.org/en-US/docs/Web/API/N...

[Сергей Соколов]

Александр Таратин, спасибо за DOMParser! В варианте с createElement() точно ли будут грузиться внешние ресурсы до того, как узел вставлен в дерево appendChild() ?

[Александр Таратин]

Сергей Соколов, Будут.

[Сергей Соколов]

Александр Таратин, попробовал разметку из вопроса через DOMParser прогнать. Получается фигня: создаётся документ, html - head, body - и текстовый узел со всеми текстами слепленными в одну строку :-\ Строка-ячейки исчезли бесследно.

var doc = new DOMParser().parseFromString(html, "text/html");
var tds = doc.querySelectorAll('td');
tds.length // 0

Т.е. видимо, надо дорисовывать разметку до валидного HTML документа, а с фрагментом не поработать.

[Сергей Соколов]

Александр Таратин, сделал такую проверку. Внешний скрипт не грузится, если элемент не вставлять в DOM, и грузится, если таки вставить:

function testLoadExternal() {
  var script = document.createElement('script');
  script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
//  document.body.appendChild(script); // эта строка определяет
}

testLoadExternal(s);

Смотрел в консоли вкладку Network: шёл запрос на этот скрипт при выполнении с раскоменченной строкой с appendChild() и не было запроса, если закомментить её.

Итого, можно смело конструировать элемент, вставлять в него HTML и искать в нём. Ничего лишнего из сети не грузится.

[Александр Таратин]

Сергей Соколов,
1.

Т.е. видимо, надо дорисовывать разметку до валидного HTML документа, а с фрагментом не поработать.

Достаточно обернуть в table
https://jsfiddle.net/vmo6vw1v/
2.

Итого, можно смело конструировать элемент, вставлять в него HTML и искать в нём. Ничего лишнего из сети не грузится.

Со скриптами ошибся, а вот картинки грузятся https://jsfiddle.net/00hudt65/ (по крайней мере в хроме)

[Сергей Соколов]

Александр Таратин, да, в FF тоже картинка грузится.