Блог

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

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

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

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

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

  if(/<[a-z][sS]*>/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" />');
  

Вы можете использовать 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);