получить атрибуты из пар значений строк html

Question

У меня есть такая строка

'<img id="1" data-name="test" src="img_01.jpg" />'

Что я хотел бы сделать, это извлечь атрибуты из пар имя-значение из строки, затем создать элемент и применить атрибуты

чтоУ меня есть это до сих пор, но я не знаю, как извлечь имя атрибута и значение

createNode = function(a, b) {
  let name = null;
  let el = null;

  if(/<[a-z][\s\S]*>/i.test(a)) {
    name = a.match(/(\w+)/i)[1];
    el = document.createElement(name);
    // get attributes and apply them
    return el;
  } 
}

createNode('<img id="1" data-name="test" src="image_01.jpg" />');

Answer 1

Вы можете использовать DOMParser для анализа строки HTML в фактическом элементе, а затем просто вернуть этот элемент:

const createNode = (htmlStr) => {
  const doc = new DOMParser().parseFromString(htmlStr, 'text/html');
  const element = doc.body.children[0];
  return element;
};

const img = createNode('<img id="1" data-name="test" src="image_01.jpg" />');
console.log(img.id);

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

createNode = function(a, b) {
  const [, tagName, attribStr] = a.match(/^<(\S+)(.*)>$/);
  const element = document.createElement(tagName);
  let match;
  const re = / *([^=]+)="([^"]*)"/g;
  while (match = re.exec(attribStr)) {
    const [, attribName, attribVal] = match;
    element.setAttribute(attribName, attribVal);
  }
  return element;
}

const img = createNode('<img id="1" data-name="test" src="image_01.jpg" />');
console.log(img.outerHTML);