如何在文本中添加一些特定单词的颜色react js？

Question

我正在开发一个包含一些特定单词的文本区域（例如，它们可以以“％”：％qwerty％开始/结束）。我希望这些单词具有不同的颜色（例如：绿色），并且文本区域仍然可以编辑。 我尝试过一些解决方案，但它们无法正常工作，这就是为什么我想询问社区如何实施文本输入区域。

我的代码在这里 https：//codesandbox.io/codesandbox.io/s/festive-cache -sshmjd？file =/src/tagsinput.js

组合成一个单个，而不是将单个组合成一个单个单词

在第1和第二个输入中，我对单词进行了分类和使用的映射（）以在标签中显示它们，但是，它们变成了分离的输入，而不是在一个中 第三输入，我为特殊单词实现了一个，但这是一个固定的字符串，我不知道如何像状态变量一样实现它来检测输入区域中的任何更改。

有人可以查看我的代码并提供帮助吗？

Answer 1

这有效，一旦输入不再集中，它就会为目标词染色。

它可以通过将文本保存到状态Onblur中，每当看到目标单词“ red”时将其分开。

// src/components/TagsInput.js
import React, { useState } from "react";

function TagsInput() {
  const [tags, setTags] = useState([]);
  const todoList = [
    { title: "item 1", isDone: false },
    { title: "item 2", isDone: true },
  ];

  function handleKeyDown(e) {
    if (e.key !== "Enter") return;
    const value = e.target.value;
    if (!value.trim()) return;
    setTags([...tags, value]);
    e.target.value = "";
    console.log("tags: " + tags);
  }

  function removeTag(index) {
    setTags(tags.filter((el, i) => i !== index));
  }
  const onCodeChange = (event) => {
    console.log("onCodeChange: " + event.currentTarget.textContent);
  };

  function TodoItem({ title, isDone }) {
    return (
      <span
        contentEditable="true"
        style={{ color: isDone ? "green" : "red" }}
        value={title}
        onInput={onCodeChange}
      >
        {title}
      </span>
    );
  }

  function Todo(props) {
    const todoList = props.todoList.map((el) => (
      <TodoItem key={el.id} title={el.title} isDone={el.isDone} />
    ));
    return <p className="tags-input-container">{todoList}</p>;
  }
  function ColorfulText({ children }) {
    return <span style={{ color: "green" }}>{children}</span>;
  }

  const [text, setText] = useState(["Your test sentence"]);

  const targetWord = "red";
  // used to split the text at target word but keep the target word
  // in the returned array
  const regex = new RegExp(`(${targetWord})`);

  return (
    <React.Fragment>
      <div className="tags-input-container">
        {tags.map((tag, index) => (
          <div className="tag-item" key={index}>
            <span className="text">{tag}</span>
            <span className="close" onClick={() => removeTag(index)}>
              ×
            </span>
          </div>
        ))}
        <input
          onKeyDown={handleKeyDown}
          type="text"
          className="tags-input"
          placeholder="Type something and Press Enter"
        />
      </div>
      <div>
        <code contentEditable="true" suppressContentEditableWarning={true}>
          {tags.map((tag) => {
            <span style={{ color: "orange" }}>{tag}</span>;
          })}
        </code>
      </div>
      <Todo todoList={todoList} />

      <div>
        <p
          contentEditable="true"
          style={{ fontSize: "2rem" }}
          onBlur={(e) => {
            setText([...e.target.textContent.split(regex)]);
          }}
        >
          {text.map((words) => {
            if (words === targetWord) {
              return <ColorfulText>{words}</ColorfulText>;
            } else {
              return words;
            }
          })}
        </p>
      </div>
    </React.Fragment>
  );
}

export default TagsInput;