如何在Angular中解析网站HTML（例如统计单词数）

算力阿峰

2026-5-27

推荐几个Angular里替代Jsoup的HTML文本提取方案

嘿，我太懂你这种困扰了——Jsoup在Java里抓网页、提取文本那叫一个行云流水，换到Angular里突然找不到顺手的工具，用HttpClient手写解析确实又繁又乱！给你推荐几个实用的替代方案，帮你简化代码：

1. 使用Cheerio（最接近Jsoup的体验）

Cheerio是前端领域的“Jsoup”，语法风格和Jsoup高度相似，上手成本极低。你可以用它轻松解析HTML字符串，提取需要的内容。

步骤：

先安装依赖：

npm install cheerio

在Angular组件里使用的示例代码：

import { HttpClient } from '@angular/common/http';
import * as cheerio from 'cheerio';

constructor(private http: HttpClient) {}

async fetchPageText(siteUrl: string) {
  try {
    const html = await this.http.get(siteUrl, { responseType: 'text' }).toPromise();
    const $ = cheerio.load(html);
    const text = $('body').text(); // 和Jsoup的doc.body().text()几乎一模一样！
    console.log(text);
    return text;
  } catch (error) {
    console.error('抓取失败:', error);
  }
}

2. 浏览器原生DOMParser（无额外依赖）

如果不想引入第三方包，浏览器自带的DOMParser API就能满足需求，虽然语法和Jsoup有差异，但胜在原生、轻量。

示例代码：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

async fetchPageText(siteUrl: string) {
  try {
    const html = await this.http.get(siteUrl, { responseType: 'text' }).toPromise();
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const text = doc.body?.textContent || '';
    console.log(text);
    return text;
  } catch (error) {
    console.error('抓取失败:', error);
  }
}