如何用JavaScript将请求返回的HTML文本转换为可用JSON？

第一步：解码HTML实体 #

你拿到的是经过转义的字符串（包含"、<这类HTML实体），首先得把它还原成原始HTML字符串，有两种实用方法：

方法1：利用DOMParser解析 #

function decodeHtmlEntities(str) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(str, "text/html");
  return doc.documentElement.textContent;
}

// 示例调用
const escapedStr = '"<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>"';
const decodedHtml = decodeHtmlEntities(escapedStr);
// 结果："<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>"

方法2：借助textarea元素（浏览器环境更简便） #

function decodeHtmlEntities(str) {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = str;
  return textarea.value;
}

第二步：解析HTML并转换为JSON #

拿到解码后的HTML后，就可以解析成DOM节点，再转换成你需要的JSON格式：

示例：将列表HTML转为数组JSON #

如果目标是把<ul>/<ol>转成简单数组：

function htmlListToJson(htmlStr) {
  const decoded = decodeHtmlEntities(htmlStr);
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = decoded;
  
  const listItems = tempDiv.querySelectorAll('li');
  const resultArray = Array.from(listItems).map(item => item.textContent.trim());
  
  return JSON.stringify(resultArray);
}

// 调用示例
const escapedStr = '"<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>"';
const jsonResult = htmlListToJson(escapedStr);
// 输出：["Coffee","Tea","Milk"]

通用DOM转JSON（适配复杂HTML） #

如果是更复杂的HTML结构，可以递归遍历DOM生成结构化JSON：

function domToJson(node) {
  const obj = {
    tag: node.tagName.toLowerCase(),
    attributes: {}
  };
  
  // 处理节点属性
  Array.from(node.attributes).forEach(attr => {
    obj.attributes[attr.name] = attr.value;
  });
  
  // 处理文本节点
  if (node.nodeType === Node.TEXT_NODE) {
    return node.textContent.trim() || null;
  }
  
  // 处理子节点
  const children = Array.from(node.childNodes)
    .map(child => domToJson(child))
    .filter(child => child !== null);
  
  if (children.length > 0) {
    obj.children = children;
  }
  
  return obj;
}

// 封装成HTML转JSON方法
function htmlToJson(htmlStr) {
  const decoded = decodeHtmlEntities(htmlStr);
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = decoded;
  return JSON.stringify(domToJson(tempDiv.firstElementChild));
}

// 调用示例
const escapedStr = '"<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>"';
const complexJson = htmlToJson(escapedStr);
/* 输出结果：
{
  "tag": "ul",
  "children": [
    {"tag": "li", "children": ["Coffee"]},
    {"tag": "li", "children": ["Tea"]},
    {"tag": "li", "children": ["Milk"]}
  ]
}
*/

额外说明 #

• 若在Node.js环境下，没有浏览器DOM API，可以用cheerio库替代，步骤逻辑一致：先解码实体，再用cheerio解析HTML，最后遍历转换。
• 如果是用户输入的HTML，要注意做XSS安全校验，避免注入风险。

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