Ionic WordPress应用社交分享优化：去除HTML特殊字符

嘿，这个场景我太熟悉了！WordPress返回的文章标题和摘要经常带着HTML实体（比如&）和标签（比如<p>），直接传给Social Sharing插件自然会显示得乱糟糟的。咱们可以写个简单的工具函数来清理这些内容，让分享出去的文本干净清爽。

步骤1：编写HTML文本清理函数 #

这个函数会帮我们把带HTML的内容转换成纯文本，同时自动解析所有HTML实体：

cleanHtmlText(htmlContent: string): string {
  // 先判断传入的内容是否为空，避免报错
  if (!htmlContent) return '';
  
  // 使用浏览器原生的DOMParser来解析HTML
  const parser = new DOMParser();
  const docElement = parser.parseFromString(htmlContent, 'text/html');
  
  // 提取纯文本内容，这一步会自动处理所有HTML实体和标签
  return docElement.body.textContent?.trim() || '';
}

步骤2：在分享函数中调用清理方法 #

修改你的sharePost函数，先清理标题和摘要，再传给分享接口：

sharePost() {
  // 清理标题和摘要中的HTML内容
  const cleanedTitle = this.cleanHtmlText(this.post.title.rendered);
  const cleanedExcerpt = this.cleanHtmlText(this.post.excerpt.rendered);

  this.socialSharing.share(cleanedExcerpt, cleanedTitle, this.post.images.large, this.post.link)
    .then(() => { console.log("sharePost: Success"); })
    .catch((error) => { console.error("sharePost: failed", error); });
}

为什么用DOMParser而不是正则？ #

很多人会想用正则表达式替换HTML标签和实体，但正则处理HTML很容易出现遗漏（比如嵌套标签、特殊实体），而DOMParser是浏览器原生的API，能正确处理所有标准的HTML结构和实体，兼容性也很好（Ionic的WebView完全支持），是更稳妥的方案。

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