React实现文本转渲染HTML，类似wordhtml.com功能

需求：开发React项目，输入框输入文本，输出框显示对应的HTML代码（实现dangerouslySetInnerHTML的反向功能），当前代码未达到预期效果，需调整。

当前尝试代码 #

import React, { useState, useEffect } from "react";
import "./InputOutput.css";

const InputOutput = () => {
  const [inputValue, setInputValue] = useState("");
  const [outputValue, setOutputValue] = useState("");

  useEffect(() => {
    const paragraphs = inputValue.split("\n").map((p) => p.trim());
    const htmlParagraphs = paragraphs.map((p) => {
      if (!p) return "<p>&nbsp;</p>";
      return `<p>${p.replace(/ /g, "&nbsp;")}</p>`;
    });
    setOutputValue(htmlParagraphs.join(""));
  }, [inputValue]);

  return (
    <div className="container">
      <div className="input-box">
        <h2>Text</h2>
        <textarea
          placeholder="Type here"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
      </div>
      <div className="output-box">
        <h2>HTML</h2>
        <div>{outputValue}</div>
      </div>
    </div>
  );
};

export default InputOutput;

输入内容 #

Hello all, my name is Alex

This is one empty lane


These are 2 empty lanes

预期输出 #

<p>Hello all, my name is Alex</p>
<p> </p>
<p>This is one empty lane</p>
<p> </p>
<p> </p>
<p>These are 2 empty lanes</p>

解决方案 #

原代码存在多余trim()移除行前后空格、错误替换非空行空格为 、拼接时未添加换行符导致格式不符的问题，修改后的代码如下：

import React, { useState, useEffect } from "react";
import "./InputOutput.css";

const InputOutput = () => {
  const [inputValue, setInputValue] = useState("");
  const [outputValue, setOutputValue] = useState("");

  useEffect(() => {
    // 按换行分割，保留每行原始内容
    const paragraphs = inputValue.split("\n");
    const htmlParagraphs = paragraphs.map((p) => {
      // 空行处理为<p>&nbsp;</p>
      if (p.length === 0) {
        return "<p>&nbsp;</p>";
      }
      // 非空行直接包裹<p>标签，保留原始空格
      return `<p>${p}</p>`;
    });
    // 用换行符拼接，让每个HTML标签单独一行
    setOutputValue(htmlParagraphs.join("\n"));
  }, [inputValue]);

  return (
    <div className="container">
      <div className="input-box">
        <h2>Text</h2>
        <textarea
          placeholder="Type here"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
      </div>
      <div className="output-box">
        <h2>HTML</h2>
        {/* 使用pre标签保留换行和空格格式 */}
        <pre>{outputValue}</pre>
      </div>
    </div>
  );
};

export default InputOutput;

修改说明 #

1. 移除trim()：保留每行原始内容，包括行前后空格，避免丢失输入格式。
2. 取消空格替换：非空行直接包裹<p>标签，不替换空格，匹配预期输出的内容格式。
3. 添加换行拼接：用\n拼接HTML片段，让每个<p>标签单独一行，符合预期的排版。
4. 使用<pre>标签：输出时用<pre>包裹，确保换行和空格被正确渲染，让HTML代码格式更直观。

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