像stackoverflow这样的textarea预览有

Question

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

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

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

<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>