IT技术 - 如何使用reactjs突出显示texarea文本中最常用的字符？ - 吾爱随笔录

我们如何像文本中出现频率最高的 5 个字符一样突出显示重复次数最多的字符。这是用于计算 textarea 中每个字符的代码。

import React, { useState, useMemo } from "react";

const removeSpace = (text) => text.replace(/\s/g, "");

function Home() {
  const [text, setText] = useState("");

  const eachCharResult = useMemo(() => {
    let result = {};
    let textWithoutSpace = removeSpace(text);
    for (let i = 0; i < textWithoutSpace.length; i++) {
      if (result[textWithoutSpace[i]]) result[textWithoutSpace[i]]++;
      else result[textWithoutSpace[i]] = 1;
    }
    return result;
  }, [text]);

  return (
    <div>
      <form>
        <h3>Please enter text</h3>
        <textarea
          onChange={(e) => setText(e.target.value)}
          placeholder="start typing"
        ></textarea>
        <p>Total number of character :{removeSpace(text).length}</p>
      </form>
      {Object.keys(eachCharResult).map((el, i) => (
        <p key={i}>{`${el}: ${eachCharResult[el]}`}</p>
      ))}
    </div>
  );
}
export default Home;

我想突出显示在文本中重复最频繁的文本，例如在图像t中重复多次，5然后是 s e o i。将它们显示为most repeated character 并显示总数t s e o i

Object.entries(eachCharResult) .sort(([, a], [, b]) => b - a) // <-- sort by the values (i.e. letter counts) .slice(0, 5) // <-- keep first 5 entries .map(([key, value], i) => ( <p key={key}> {key}: {value} </p> ))