Javascript 像stackoverflow这样的textarea预览有

发布于05月13日

我有一个textarea，我创建了一个预览div，它只显示文本，但我希望文本的背景 colored颜色为灰色，当句子在``之间时，显示代码.

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

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

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

我的功能是:

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("");

我有什么办法可以做到吗？

推荐答案

您可能应该考虑为此使用一些库来处理所有边缘情况.

但为了便于学习，你可以参考下面的片段，我将文本拆分为`，并将所有奇数索引项包装在code中.

当你拆分字符串"type `code` here"时，你会得到这个数组["type", "code", "here"]，如果你观察到`中的内容，它的索引总是奇数.所以，我在数组上映射，并将所有奇数索引项包装在code中.Try spitting more such strings and you'll get more clarity on this.

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>

Javascript 像stackoverflow这样的textarea预览有

推荐答案

Javascript相关问答推荐

深嵌套的ng-container元素仍然可以在Angular 布局组件中正确渲染内容吗？

硬币兑换运行超时

Chart.js V4切换图表中的每个条，同时每个条下有不同的标签.怎么做？

浮动Div的淡出模糊效果

为什么我的列表直到下一次提交才更新值/onChange

google docs boldText直到按行执行应用脚本错误

如何在 cypress 中使用静态嵌套循环

如何将Cookie从服务器发送到用户浏览器

如何在coCos2d-x中更正此错误

WhatsApp Cloud API上载问题：由于MIME类型不正确而导致接收&Quot；INVALID_REQUEST"；错误

用JS从平面文件构建树形 struct 的JSON

为什么这个.add.group({})在教程中运行得很好，但在我的游戏中就不行了？

MongoDB受困于太多的数据

将范围 Select 器添加到HighChart面积图

P5.js中矩形内的圆弧

表单数据中未定义的数组键

将字体样式应用于material -UI条形图图例

单击时同时 Select 和展开可访问的行

为什么Reaction useEffect函数会将控制台日志(log)呈现两次

如何使用属性访问器定义循环的for...的局部变量