如何将包含ul/li结构的HTML字符串转换为指定格式的对象数组？

优先选择原生DOM解析方案（浏览器环境），该方案稳定性、可维护性远高于正则匹配，不会因为HTML字符串的换行、空格、标签属性等微小变动出现匹配错误。

浏览器环境实现代码 #

// 取接口返回的HTML字符串
const denialHtml = denialReasonContent.denialReason;
// 创建临时DOM节点做解析载体
const tempContainer = document.createElement('div');
tempContainer.innerHTML = denialHtml;
// 遍历所有li节点生成目标数组
const denialReasons = Array.from(tempContainer.querySelectorAll('li')).map(liItem => {
  return {
    denialReason: liItem.textContent.trim()
  }
});

Node.js环境实现代码 #

Node环境没有原生DOM API，可以借助第三方HTML解析库cheerio完成解析：

1. 首先安装依赖

npm install cheerio

2. 解析代码

const cheerio = require('cheerio');
const denialHtml = denialReasonContent.denialReason;
const $ = cheerio.load(denialHtml);
const denialReasons = [];
$('li').each((_, el) => {
  denialReasons.push({
    denialReason: $(el).text().trim()
  })
});

不推荐的正则方案（仅适用于HTML结构100%固定的临时场景） #

如果场景非常简单且可以完全保证HTML结构不会变动，也可以用正则快速处理，但生产环境不建议使用：

const denialHtml = denialReasonContent.denialReason;
const liReg = /<li>([\s\S]*?)<\/li>/g;
const denialReasons = [];
let matchResult;
while ((matchResult = liReg.exec(denialHtml)) !== null) {
  denialReasons.push({
    denialReason: matchResult[1].trim()
  })
}

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