如何使用JavaScript将JSON值转换为HTML并正确渲染含HTML格式的内容？

你的代码目前有几个关键问题需要调整，我们一步步来解决：

1. 数组直接赋值innerHTML会产生多余逗号 #

map方法返回的是一个数组，直接把数组赋值给innerHTML时，浏览器会自动把数组转成字符串，元素之间会加上逗号，这会导致页面上出现不必要的逗号。你需要用join('')把数组拼接成完整的HTML字符串。

2. 转义的HTML标签需要解码 #

你的JSON里的HTML标签是被转义成HTML实体的（比如<em>代替<em>），浏览器会把这些实体当作纯文本显示，而不会解析成真正的HTML标签。我们需要先把这些实体解码回原始的HTML标签。

3. 段落文本需要转换成HTML换行结构 #

你的entry里的段落是连续的文本，没有对应的HTML换行标签，所以需要把这些段落拆分后，用<p>标签包裹或者添加<br>来实现换行。

完整解决方案代码 #

// 工具函数：解码HTML实体
function decodeHtmlEntities(htmlString) {
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = htmlString;
  return tempDiv.innerHTML;
}

const myJson = out.response.items.map((item, index) => {
  // 1. 解码entry中的HTML实体
  const decodedEntry = decodeHtmlEntities(item.entry);
  
  // 2. 拆分段落：这里假设段落是用"句号+空格+大写字母"分隔，你可以根据实际内容调整规则
  // 如果你的段落是用换行符(\n)分隔，就改成 split('\n').filter(p => p.trim())
  const paragraphs = decodedEntry.split(/(?<=\.)\s+(?=[A-Z])/);
  
  // 3. 把每个段落包裹成<p>标签，实现段落换行
  const formattedEntry = paragraphs.map(paragraph => `<p>${paragraph}</p>`).join('');
  
  // 返回拼接好的单个项HTML
  return `<div data-item="${index}">
            <h2>${item.title}</h2>
            ${formattedEntry}
          </div>`;
});

// 4. 把数组拼接成完整字符串后赋值给innerHTML
content.innerHTML = myJson.join('');

代码说明 #

• 解码HTML实体：通过创建临时DOM元素，利用浏览器的HTML解析能力自动解码实体，这是最可靠的方式，避免手动替换实体可能遗漏的情况。
• 段落拆分：使用正则表达式/(?<=\.)\s+(?=[A-Z])/匹配“句号+空格+大写字母”的位置来拆分段落，这适用于你示例中的文本结构。如果你的实际段落是用换行符分隔的，直接替换成split('\n').filter(p => p.trim())即可（filter用来移除空行）。
• 数组拼接：最后用join('')把所有项的HTML拼成一个完整字符串，避免出现多余逗号。

这样处理后，entry里的<em>、<a>等标签会被正确渲染成对应的样式和链接，段落也会自动换行显示。

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