Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

203
Vistas
How to highlight most frequent character in the text from texarea using reactjs?

How can we highlight the most repeated character like the 5 most frequent characters in the text. Here is the code that is used to count each character from the 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;

I want to highlight the text that are repeated most frequently in the text like in image t is repeated for 5 times followed by s e o i. Displaying them as most repeated character and show total count of t s e o i enter image description here

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

From what I can tell you are aiming for, you want to list the 5 most common characters and their counts. You can sort an array of entries, keep the top 5 results, and then map them to 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>
  ))

enter image description here

Edit how-to-highlight-most-frequent-character-in-the-text-from-texarea-using-reactjs

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda