JavaScript或jQuery如何给HTML元素批量添加多个属性，支持属性字符串格式赋值

解决方案 #

原生JavaScript #

原生没有直接提供可以直接解析这类属性字符串并批量赋值的内置方法，你可以通过以下两种方式实现：

1. 正则解析属性字符串后循环赋值

function setBulkAttributes(element, attrString) {
  const attrMatcher = /([a-zA-Z0-9_-]+)\s*=\s*"([^"]*)"/g;
  let matchResult;
  while ((matchResult = attrMatcher.exec(attrString)) !== null) {
    element.setAttribute(matchResult[1], matchResult[2]);
  }
}

// 调用示例
const targetElement = document.querySelector('#your-element');
const attr = ' min="0" step="5" max="100" ';
setBulkAttributes(targetElement, attr);

2. 利用浏览器原生HTML解析能力实现（兼容性更好，避免正则遗漏边界场景）

function setBulkAttributes(element, attrString) {
  const tempContainer = document.createElement('div');
  // 把属性字符串拼到临时标签上，让浏览器自动解析属性
  tempContainer.innerHTML = `<temp-tag ${attrString}></temp-tag>`;
  const tempElement = tempContainer.firstChild;
  // 遍历临时元素的所有属性赋值给目标元素
  Array.from(tempElement.attributes).forEach(attrItem => {
    element.setAttribute(attrItem.name, attrItem.value);
  });
}

jQuery #

jQuery的attr()方法本身就支持传入属性集合批量赋值，你可以配合临时元素解析属性，写法非常简洁：

const attr = ' min="2019-12-25T19:30" ';
// 一行代码完成赋值
$('#your-element').attr($(`<div ${attr}>`)[0].attributes);

内容的提问来源于stack exchange，提问作者smolo