ReactJS音译应用输出无法保留换行符问题求助

问题根源 #

换行符丢失的核心原因有两点：

• 通过GET请求传递带换行的文本时，未对参数做正确编码，导致换行符（\n）在URL传递过程中被丢失或转义错误。
• 后端处理音译时，未保留换行结构，直接对整段文本处理，导致各行内容被无差别拼接。

解决方案 #

1. 前端参数编码 #

发送请求前用encodeURIComponent对输入文本编码，确保换行符被转换为URL可识别的%0A格式，后端解码后能还原原始换行结构。

修改后的前端回调函数：

const handleInputChange = useCallback(async ({ target: { value } }) => {
    const lowercasedValue = value.toLowerCase();
    setInputValue(value);
    setInputValueLowercase(lowercasedValue);
    // 编码参数，保留换行符
    const encodedValue = encodeURIComponent(lowercasedValue);
    const response = await fetch(`/api/transliterate?value=${encodedValue}&from=latin&to=georgian`);
    const { result } = await response.json();
    setOutputValue(result);
  }, []);

const handleOutputChange = useCallback(async ({ target: { value } }) => {
    setOutputValue(value);
    const encodedValue = encodeURIComponent(value);
    const response = await fetch(`/api/transliterate?value=${encodedValue}&from=georgian&to=latin`);
    const { result } = await response.json();
    setInputValue(result);
  }, []);

2. 后端按行处理音译 #

后端先解码参数，将文本按换行分割后逐行处理，再用换行符拼接结果，确保换行结构完整保留。

以下是Node.js后端的示例处理逻辑（假设用Express框架）：

app.get('/api/transliterate', async (req, res) => {
  try {
    const { value, from, to } = req.query;
    // 解码参数，还原包含换行的原始文本
    const decodedText = decodeURIComponent(value);
    // 按换行分割成单行
    const lines = decodedText.split('\n');
    // 逐行执行音译逻辑（替换为你的实际音译函数）
    const translatedLines = await Promise.all(
      lines.map(line => yourTransliterationFunction(line, from, to))
    );
    // 用换行符拼接处理后的内容
    const result = translatedLines.join('\n');
    res.json({ result });
  } catch (err) {
    res.status(500).json({ error: 'Transliteration failed' });
  }
});

3. 保留前端文本框配置 #

你当前设置的style={{ whiteSpace: 'pre-wrap' }}是正确的，它能确保textarea渲染时正确解析换行符，无需修改。

额外建议 #

如果需要处理大段文本，推荐改用POST请求传递数据，避免GET请求的URL长度限制，参数处理也更可靠：

// 前端POST请求示例
const handleInputChange = useCallback(async ({ target: { value } }) => {
    const lowercasedValue = value.toLowerCase();
    setInputValue(value);
    setInputValueLowercase(lowercasedValue);
    const response = await fetch('/api/transliterate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ value: lowercasedValue, from: 'latin', to: 'georgian' })
    });
    const { result } = await response.json();
    setOutputValue(result);
  }, []);

对应的后端POST处理：

app.post('/api/transliterate', async (req, res) => {
  try {
    const { value, from, to } = req.body;
    const lines = value.split('\n');
    const translatedLines = await Promise.all(
      lines.map(line => yourTransliterationFunction(line, from, to))
    );
    const result = translatedLines.join('\n');
    res.json({ result });
  } catch (err) {
    res.status(500).json({ error: 'Transliteration failed' });
  }
});

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