Ionic应用如何提取WP REST API返回的WPBakery内容文本与图片

完全可以过滤冗余标记提取目标内容，根据你是否有WordPress站点后台权限，可选两种实现路径：

方案一：WordPress源头处理（推荐） #

直接在REST API输出层完成内容清洗，前端不用额外处理冗余数据，性能和稳定性最好。

• 不要直接调用接口默认返回的content.rendered字段，通过rest_api_init钩子自定义清洗后的内容字段，核心逻辑是先解析WPBakery的短代码，再过滤残留的构建器专属标记
• 参考实现代码（放入WordPress主题的functions.php文件即可）：

add_action('rest_api_init', function () {
    register_rest_field(['post', 'page'], 'clean_content', [
        'get_callback' => function ($post_arr) {
            $raw = $post_arr['content']['raw'];
            // 解析所有WPBakery短代码为标准HTML
            $rendered = do_shortcode($raw);
            // 过滤vc专属class、data属性
            $clean = preg_replace('/\sclass="vc_[^"]*"/', '', $rendered);
            $clean = preg_replace('/\sdata-vc-[^=]*="[^"]*"/', '', $clean);
            // 移除无内容的空容器标签
            $clean = preg_replace('/<(div|span|section)[^>]*>\s*<\/\1>/', '', $clean);
            
            // 提取纯文本
            $plain_text = wp_strip_all_tags($clean, true);
            // 提取图片地址
            $images = [];
            if (class_exists('DOMDocument')) {
                $dom = new DOMDocument();
                @$dom->loadHTML($clean);
                foreach ($dom->getElementsByTagName('img') as $img) {
                    $src = $img->getAttribute('src');
                    if (!str_contains($src, 'vc_placeholder') && !str_contains($src, 'blank.gif')) {
                        $images[] = $src;
                    }
                }
            }

            return [
                'html' => $clean,
                'plain_text' => trim($plain_text),
                'images' => $images
            ];
        }
    ]);
});

接口请求后直接取返回数据的clean_content字段，就能拿到清洗后的HTML、纯文本、图片列表。

方案二：Ionic前端过滤（无WordPress后台权限时使用） #

如果没法修改WordPress站点代码，直接在Ionic应用内对接口返回的原始内容做清洗：

• 先通过正则移除未解析的WPBakery短代码、专属属性、空容器标签
• 再用浏览器原生DOMParser做DOM级别的内容提取，避免纯正则匹配HTML的容错问题
• 参考TypeScript实现：

// 清洗原始内容中的WPBakery冗余标记
cleanVCRawContent(raw: string): string {
  let content = raw.replace(/\[\/?vc_[^\]]*\]/g, '');
  content = content.replace(/\sclass="vc_[^"]*"/g, '');
  content = content.replace(/\sdata-vc-[^=]*="[^"]*"/g, '');
  content = content.replace(/<(div|span|section)[^>]*>\s*<\/\1>/g, '');
  return content;
}

// 从清洗后的HTML中提取纯文本
extractPlainText(cleanHtml: string): string {
  const parser = new DOMParser();
  const doc = parser.parseFromString(cleanHtml, 'text/html');
  return doc.body.textContent?.trim() || '';
}

// 从清洗后的HTML中提取有效图片地址
extractImages(cleanHtml: string): string[] {
  const parser = new DOMParser();
  const doc = parser.parseFromString(cleanHtml, 'text/html');
  return Array.from(doc.querySelectorAll('img'))
    .map(img => img.src)
    .filter(src => !src.includes('vc_placeholder') && !src.includes('blank.gif'));
}

注意：不要完全依赖正则处理HTML结构，遇到嵌套标签、属性包含特殊字符的场景很容易出现匹配错误，涉及内容提取优先用DOM解析方案，稳定性更高。

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