javascript - 如何使用reactjs突出显示texarea文本中最常见的字符？

Question

我们如何突出显示重复次数最多的字符，例如文本中最常见的 5 个字符。这是用于计算文本区域中每个字符的代码。

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

标签： javascriptreactjs

Answer 1

根据我可以告诉你的目标，你想列出 5 个最常见的字符及其数量。您可以对一组条目进行排序，保留前 5 个结果，然后将它们映射到 JSX。

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