如何去除JSON格式以在HTML中展示？亚马逊图书标题提取问题

后端直接返回纯书名（推荐） #

核心是在爬取阶段直接提取纯文本标题，避免将其转为JSON字符串后再处理。如果需要中文书名，可集成翻译服务完成转换。

提取英文标题示例 #

// Puppeteer+Express 后端代码修改示例
const express = require('express');
const puppeteer = require('puppeteer');
const app = express();

app.get('/get-book-title', async (req, res) => {
  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.amazon.com/dp/081297381X'); // 目标图书页面

    // 直接提取标题纯文本，无需转为JSON字符串
    const pureTitle = await page.$eval('#productTitle', el => el.textContent.trim());
    
    res.send(pureTitle);
    await browser.close();
  } catch (err) {
    console.error(err);
    res.status(500).send('获取标题失败');
  }
});

app.listen(3000, () => console.log('服务运行在端口3000'));

转为中文书名示例（伪代码） #

如果需要将英文标题转为中文，可在提取后集成翻译服务：

// 翻译函数伪代码，需替换为实际翻译API调用
const translateToChinese = async (englishTitle) => {
  // 调用翻译API获取中文结果
  const response = await fetch('翻译API地址', {
    method: 'POST',
    body: JSON.stringify({ text: englishTitle })
  });
  const data = await response.json();
  return data.translatedText;
};

// 在获取英文标题后调用翻译
const pureTitle = await page.$eval('#productTitle', el => el.textContent.trim());
const chineseTitle = await translateToChinese(pureTitle);
res.send(chineseTitle);

如果爬取的是API返回的JSON数据，需先解析JSON对象再提取标题：

// 处理API JSON响应的示例
const response = await page.waitForResponse(res => res.url().includes('book-info-api'));
const bookData = await response.json();
const pureTitle = bookData.title; // 根据实际字段名调整
res.send(pureTitle);

前端解析JSON字符串获取书名 #

如果后端无法修改，只能返回JSON格式的字符串，前端可通过JSON.parse()解析得到纯书名：

<!-- 前端HTML/JS代码修改示例 -->
<div id="book-title"></div>
<script>
fetch('/get-book-title')
  .then(res => res.text())
  .then(jsonStr => {
    // 解析JSON字符串得到纯标题
    const pureTitle = JSON.parse(jsonStr);
    document.getElementById('book-title').textContent = pureTitle;
  })
  .catch(err => console.error(err));
</script>

为什么replace/replaceAll无效？ #

你之前尝试的字符串替换方法失效，是因为JSON字符串可能包含转义字符（如\"）或嵌套结构，手动替换无法覆盖所有边界情况，而通过JSON解析是处理这类数据的标准、可靠方式。

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