摘要：Waline 返回的评论包含 HTML 标签和换行符，本文介绍了两种方法（正则替换和 DOMParser）去除这些内容，保留纯文本，并提供了代码示例。

如何处理 Waline 返回的 HTML 和换行符问题

      你遇到的问题是：从 Waline 返回的 comment 字段中包含 HTML 标签（如 <p>、</p>）和换行符（\n），你想去掉这些内容，只保留纯文本。

示例数据

{
  "comment": "<p>test</p>\n",
  "nick": "admin"
}

目标

      将 "comment" 字段中的：

• HTML 标签（如 <p>、</p>）
• 换行符 \n

      都去掉，最终得到：

test

解决方法

方法一：使用正则表达式 + replace 去掉 HTML 和换行

function cleanComment(html) {
  // 先去除所有 HTML 标签
  let text = html.replace(/<[^>]+>/g, '');
  // 再去除 \n 和首尾空格
  return text.replace(/\n/g, '').trim();
}

方法二：使用 DOM 解析器（更安全）

function cleanHTML(str) {
  const doc = new DOMParser().parseFromString(str, 'text/html');
  return doc.body.textContent || '';
}

最终代码示例

RecentComments({
  serverURL: 'https://waline.gezhong.vip',
  count: 5,
  el: '#waline-recent'
}).then(({ comments }) => {
  function cleanHTML(str) {
    const doc = new DOMParser().parseFromString(str, 'text/html');
    return doc.body.textContent || '';
  }

  const html = comments.data.map(comment => {
    const text = cleanHTML(comment.comment);
    return `
      <div class="waline-comment"
        ><strong>${comment.nick}</strong>: ${text}
      </div>
    `;
  }).join('');

  document.getElementById('waline-recent').innerHTML = html;
});

总结

      两种方法都可以有效去除 HTML 标签和换行符，推荐使用更安全的 DOMParser。