基于HTML字符串查找DOM元素

Question

我目前正在寻找一种方法，可以根据提供的HTML字符串找到DOM元素。我有一个类似的字符串

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

但是说实话，我真的不明白为什么要用这种方式存储它们，而不是存储选择器来找到它（在最坏的情况下，ID或属性列表）