javascript - 像stackoverflow这样的textarea预览有

Question

我有一个 textarea ，我创建了一个只显示文本的预览div，但我希望文本在句子之间时具有灰色背景色以显示代码。

<textarea onChange={handleChange}></textarea>

我有一个包含 pre 的 div和 code堵塞。

<div>
 <pre>{preview}</pre>
 <code>{code}</code>
</div>

我的 handleChange功能是:

const handleChange = (e) =>{
    e.preventDefault()
    setDescription(e.target.value)
    setPreview(e.target.value);

    if (e.key === '`'){
      setCode(e.target.value)
    }

}

在这里，代码和预览是使用 useState 定义的。

const [preview, setPreview] = useState("");
const [code, setCode] = useState("");

有什么办法可以实现吗？

Answer 1

您可能应该考虑为此使用一些库来处理所有边缘情况。
但出于学习目的，您可以引用下面的片段，我将文本拆分为 `并将所有奇数索引项包装在 code 中.
拆分字符串时 "type `code` here" , 你得到这个数组 ["type", "code", "here"]如果你观察到包裹在 ` 里面的内容将始终处于奇数索引处。所以，我已经映射了数组并将所有奇数索引项包装在 code 中。 .尝试吐出更多这样的字符串，你会更清楚这一点。

function App() {
  const [content, setContent] = React.useState("Type `code` here");

  return (
    <div>
      <textarea
        value={content}
        onChange={({ target }) => setContent(target.value)}
      ></textarea>
      <p>
        {content
          .split("`")
          .map((c, i) => (i & 1 ? <code key={i}>{c}</code> : c))}
      </p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

code {
  background: #eee;
  padding: 0.25rem;
  border-radius: 0.15rem;
}

textarea {
  width: 60ch;
  height: 5rem;
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>