在Expo中结合Readability使用jsdom遇阻，求解决方案

方案1：利用WebView在浏览器环境运行Readability #

Readability原生适配浏览器DOM环境，React Native的WebView提供了完整的浏览器运行上下文，完美匹配Readability的要求，实现步骤如下：

1. 安装依赖（Expo项目直接执行）：

expo install react-native-webview

2. 编写WebView组件，注入解析脚本完成内容提取，并将结果传回原生端：

import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';

const ReadabilityParser = ({ html, onResult }) => {
  const webViewRef = useRef(null);

  // 注入的解析逻辑脚本
  const parseScript = `
    // 加载Readability（建议将Readability源码保存到本地assets目录，替换为本地路径）
    const script = document.createElement('script');
    script.src = './Readability.js';
    script.onload = () => {
      const docClone = document.cloneNode(true);
      const reader = new Readability(docClone);
      const article = reader.parse();
      // 将解析结果传递给原生
      window.ReactNativeWebView.postMessage(JSON.stringify(article));
    };
    document.head.appendChild(script);
  `;

  const handleMessage = (event) => {
    const parsedResult = JSON.parse(event.nativeEvent.data);
    onResult(parsedResult);
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ html }}
      injectedJavaScript={parseScript}
      onMessage={handleMessage}
      style={{ height: 0, width: 0 }} // 隐藏WebView，仅做后台解析
    />
  );
};

// 组件使用示例
const App = () => {
  const handleParseComplete = (article) => {
    console.log('提取的文章内容:', article.title, article.content);
    // 后续业务逻辑处理
  };

  return (
    <ReadabilityParser
      html="<html>你的网页源码内容</html>"
      onResult={handleParseComplete}
    />
  );
};

export default App;

方案2：使用轻量DOM模拟库linkedom #

linkedom是一款不依赖Node.js标准库（如fs）的DOM实现，可直接在Expo/React Native环境运行，完美兼容Readability的接口要求：

1. 安装依赖：

npm install @mozilla/readability linkedom
# 或 yarn 安装
yarn add @mozilla/readability linkedom

2. 编写解析函数：

import { Readability } from '@mozilla/readability';
import { parseHTML } from 'linkedom';

const parseArticle = (htmlSource) => {
  // 创建DOM文档
  const { document } = parseHTML(htmlSource);
  // 补充Readability所需的浏览器环境属性
  document.documentElement.lang = 'zh-CN'; // 根据实际网页语言调整
  document.documentElement.dir = 'ltr';

  const reader = new Readability(document);
  return reader.parse();
};

// 使用示例
const rawHtml = '<html>待解析的网页源码</html>';
const articleData = parseArticle(rawHtml);
console.log('解析结果:', articleData);

方案3：后端解析（最省心的方案） #

如果客户端端DOM模拟调试成本高，可将解析逻辑转移到后端：

• 搭建简单API接口（如Node.js + Express），接收前端传来的网页源码
• 后端用jsdom + @mozilla/readability完成解析，返回结构化数据
• 前端仅需调用API获取结果

后端示例代码（Node.js）：

const express = require('express');
const { JSDOM } = require('jsdom');
const { Readability } = require('@mozilla/readability');
const app = express();
app.use(express.json());

app.post('/parse-article', (req, res) => {
  const { html } = req.body;
  // 构造DOM环境，设置URL用于解析相对链接
  const dom = new JSDOM(html, { url: 'https://example.com' });
  const reader = new Readability(dom.window.document);
  const article = reader.parse();
  res.json(article);
});

app.listen(3000, () => console.log('解析API运行在3000端口'));

前端调用示例：

const fetchParsedArticle = async (html) => {
  const response = await fetch('http://你的API地址/parse-article', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html })
  });
  return await response.json();
};

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