Найти элементы DOM на основе строки HTML

Question

В настоящее время я ищу способ найти элемент DOM на основе предоставленной строки HTML. У меня есть строка типа

<div class="s-navigation s-navigation__muted s-navigation__sm" style=""></div>

, где все дети были удалены. Используя эту строку, я хотел бы иметь возможность найти соответствующий элемент DOM в документе. У меня нет доступа к детям, так как они заняли много места для хранения вещей.

Я пытался просто разобрать его в jQuery, но элемент не существует - я предполагаю, что внутренности исчезли.

Спасибо,

Answer 1

Должно быть что-то вроде этого

var htmlString = '<div class="s-navigation s-navigation__muted s-navigation__sm" style="color: red"></div>';

function findByString(str){
  var tag = str.match(/^<(\S+)/)[1];
  var attrs = str.match(/([^\s="]+="[^"]+")|([^\s=']+='[^']+')/g);
  var q = tag+attrs.map(t => '['+t+']').join('');
  return document.querySelector(q);
}

var el = findByString(htmlString);
console.log(el);

<div class="s-navigation s-navigation__muted s-navigation__sm" style="color: red">
<div id="some-child element"></div>
</div>
<div id="dont select me" style="color: beautiful"></div>

Но, честно говоря, я не совсем понимаю, почему вы храните их таким образом, а не сохраняете селектор, чтобы найти его (идентификатор или список атрибутов в худшем случае )