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

从html字符串名称值对中获取属性

1 个答案: