浏览器环境下用JavaScript获取URL数据，求替代browserify的最优方案

刚好我之前也处理过类似的场景，给你几个完全不需要依赖Node.js的通用方案，都是浏览器原生支持或者轻量无依赖的，适配你的需求：

1. 用浏览器原生fetch API + DOMParser实现核心功能 #

这是最直接的替代方案，完全不需要额外工具，浏览器本身就支持：

核心思路 #

• 用fetch替代Node.js里的http/https模块发起网络请求
• 用DOMParser解析返回的HTML字符串，然后通过浏览器原生DOM API提取文本

示例代码 #

// 发起HTML请求并提取文本
async function fetchAndExtractText(url) {
  try {
    // 发起请求，获取响应
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`请求失败: ${response.status}`);
    }
    // 获取HTML字符串
    const html = await response.text();
    // 解析HTML为DOM对象
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    
    // 提取文本的几种方式：
    // 方式1: 获取整个页面的纯文本
    const fullText = doc.body.textContent.trim();
    
    // 方式2: 提取特定元素的文本（比如所有<p>标签）
    const paragraphTexts = Array.from(doc.querySelectorAll('p'))
      .map(p => p.textContent.trim());
    
    return { fullText, paragraphTexts };
  } catch (error) {
    console.error('处理出错:', error);
    return null;
  }
}

// 使用示例
fetchAndExtractText('https://example.com')
  .then(result => {
    if (result) {
      console.log('页面全文:', result.fullText);
      console.log('段落文本:', result.paragraphTexts);
    }
  });

2. 处理跨域问题（重要！） #

如果你的前端页面和目标HTML不在同一个域名下，浏览器会触发CORS限制。这里有两个无依赖的解决思路：

• 方案A: 确认目标网站是否支持CORS或者提供JSONP接口（如果有的话）
• 方案B: 用浏览器的iframe加载目标页面（需目标网站允许嵌入），然后通过postMessage传递文本内容（注意安全限制）

3. 替代Node.js的require语法 #

浏览器里不需要require，你可以直接用两种方式组织代码：

• 普通脚本: 直接写<script>标签引入你的JS文件，变量和函数会挂在全局作用域
• ES模块: 用<script type="module">标签，然后用import/export语法组织代码，浏览器原生支持

4. 轻量替代方案（可选） #

如果需要类似Node里cheerio的便捷选择器语法，但又不想依赖Node，可以用纯前端的轻量库比如zepto.js（仅3KB左右），不过其实浏览器原生的querySelector/querySelectorAll已经足够强大，大部分场景不需要额外库。

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