基于正则表达式将文本转换为html并在输入或ContentEditable中显示

Question

我目前正在 React.js 项目中实现一个功能，我想将用户输入的文本（例如 ($anyText)）中的特定模式转换为像 anyText 这样的格式化结构。这将允许输入的文本在发送到后端时被视为变量。我还计划为用户预定义变量名称。

这是我的目标的一个例子：

任何关于如何在 React 中优雅地实现这一目标的建议或指导将不胜感激。

我试过了

function CreateTemplate() {
  const [content, setContent] = useState("");
  const handleInputChange = (e) => {
    const newText = e.target.textContent;
    const formattedText = newText.replace(
      /\(\$(.*?)\)/g,
      '<span class="variable">$1</span>'
    );
    setContent(formattedText);
  };


  return <div
      contentEditable
      onInput={handleInputChange}
      dangerouslySetInnerHTML={{ __html: content }}
    />
}

但这根本没有按预期工作

Answer 1

我真的尽了最大努力来了解你的问题，它给了我输出。

请检查是否满足您的需求。

使用下面的代码，我已经测试过它工作正常。

这是示例输入：这是一个带有变量的示例句子：($testing)、($anyText)、($userInput)。

注意：您的代码指向 wards 捕获 () 内的变量，因此请确保它是正确的，如果您也想包含不带 () 的内容，例如 $userInput 那么请考虑相应地更改正则表达式

import React, { useState } from "react";
import ReactDOM from "react-dom/client";

function CreateTemplate() {
  const [content, setContent] = useState("");

  const handleInputChange = (e) => {
    const newText = e.target.textContent;
    const formattedText = newText.replace(
      /\(\$(.*?)\)/g,
      (_, variable) => `<span class="variable">${variable}</span>`
    );
    setContent(formattedText);
  };

  return (
    <div contentEditable onInput={handleInputChange}>
      {content && (
        <div>
          <h2>Formatted Output:</h2>
          <div dangerouslySetInnerHTML={{ __html: content }} />
        </div>
      )}
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Variable Formatter</h1>
      <CreateTemplate />
    </div>
  );
}

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App/>);