Build a Simple React JavaScript Interactive Interactive Text Highlighter: A Beginner’s Guide

Written by

learnmodernjavascript

in

In today’s digital world, we’re constantly bombarded with text. Whether it’s reading articles, analyzing code, or simply browsing the web, we often need to highlight specific words or phrases to emphasize key information. Manually highlighting text can be tedious and time-consuming. Imagine having a tool that dynamically highlights text based on user input, making it easier to focus on what matters most. This is where a React-based text highlighter comes in handy. This tutorial will guide you through building a simple, interactive text highlighter, perfect for beginners and intermediate developers looking to expand their React skills. We’ll explore the core concepts, step-by-step implementation, and common pitfalls to help you create a functional and user-friendly application.

Why Build a Text Highlighter?

A text highlighter is more than just a cool feature; it has practical applications across various domains:

  • Enhanced Readability: Highlighting key terms improves comprehension and allows users to quickly scan for relevant information.
  • Educational Purposes: Students can use it to highlight important concepts in study materials.
  • Content Creation: Writers and editors can use it to emphasize crucial points in their articles.
  • Accessibility: It aids users with visual impairments by making specific text segments more noticeable.

By building this project, you’ll not only learn about React components, state management, and event handling but also gain a practical understanding of how to make web content more interactive and user-friendly.

Prerequisites

Before diving into the code, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the React development server.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages will help you understand the code and concepts presented.
  • A code editor: Choose your preferred code editor (VS Code, Sublime Text, Atom, etc.) to write and edit your code.

Setting Up the React Project

Let’s start by creating a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app text-highlighter
cd text-highlighter

This command creates a new React project named “text-highlighter” and navigates you into the project directory. Now, start the development server:

npm start

This command will open your app in a new browser tab, usually at `http://localhost:3000`. You should see the default React app’s welcome screen. Now, let’s clean up the project by deleting unnecessary files and modifying `App.js`.

Project Structure and File Setup

For this project, we’ll keep it simple and create a straightforward structure:

  • `src/`
    • `App.js`: Contains the main component of our application.
    • `App.css`: Styles for our application.
  • `public/index.html`: The main HTML file.

First, delete the following files from the `src` folder: `App.test.js`, `index.css`, `logo.svg`, and `reportWebVitals.js`, and `setupTests.js`. Then, modify your `App.js` to start with a basic structure.

Here’s how your `App.js` should look initially:

import React, { useState } from 'react';
import './App.css';

function App() {
  const [searchText, setSearchText] = useState('');
  const [textToHighlight, setTextToHighlight] = useState("This is a sample text. We will highlight the words in this text based on user input. React is a popular JavaScript library for building user interfaces.");

  const handleSearchChange = (event) => {
    setSearchText(event.target.value);
  };

  return (
    <div>
      <h2>Text Highlighter</h2>
      <input
        type="text"
        placeholder="Enter text to highlight"
        value={searchText}
        onChange={handleSearchChange}
      />
      <p>{textToHighlight}</p>
    </div>
  );
}

export default App;

In this code:

  • We import the `useState` hook from React.
  • `searchText` stores the text entered by the user in the input field.
  • `textToHighlight` contains the text where we’ll apply the highlighting.
  • `handleSearchChange` updates the `searchText` state whenever the input field changes.
  • The JSX returns a basic layout with an input field and a paragraph displaying `textToHighlight`.

Let’s add some basic CSS to `App.css`:

.App {
  font-family: sans-serif;
  text-align: center;
  padding: 20px;
}

input[type="text"] {
  padding: 10px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}

This CSS provides basic styling for the app, including the input field, the text paragraph, and a `highlight` class that we’ll use later.

Implementing the Highlighting Logic

The core of our application lies in the ability to dynamically highlight text based on the user’s input. We’ll achieve this by:

  1. Splitting the text into an array of words.
  2. Checking if each word contains the search text.
  3. Wrapping matching words with a `<span>` element with the `highlight` class.

Modify the `App.js` component to include the highlighting logic:

import React, { useState, useMemo } from 'react';
import './App.css';

function App() {
  const [searchText, setSearchText] = useState('');
  const [textToHighlight, setTextToHighlight] = useState("This is a sample text. We will highlight the words in this text based on user input. React is a popular JavaScript library for building user interfaces.");

  const handleSearchChange = (event) => {
    setSearchText(event.target.value);
  };

  const highlightedText = useMemo(() => {
    if (!searchText) {
      return textToHighlight;
    }

    const regex = new RegExp(`(${searchText})`, 'gi');
    return textToHighlight.split(regex).map((part, index) => {
      if (part.match(regex)) {
        return <span key={index} className="highlight">{part}</span>;
      } else {
        return part;
      }
    });
  }, [searchText, textToHighlight]);

  return (
    <div>
      <h2>Text Highlighter</h2>
      <input
        type="text"
        placeholder="Enter text to highlight"
        value={searchText}
        onChange={handleSearchChange}
      />
      <p>{highlightedText}</p>
    </div>
  );
}

export default App;

Let’s break down the changes:

  • We import `useMemo` from React.
  • We use `useMemo` to memoize the `highlightedText` to prevent unnecessary re-renders. The `useMemo` hook recalculates the value only when `searchText` or `textToHighlight` changes.
  • Inside `useMemo`, we check if `searchText` is empty. If it is, we return the original `textToHighlight`.
  • We create a regular expression (`regex`) using the `searchText`. The `gi` flags ensure a global (all occurrences) and case-insensitive search.
  • We split the `textToHighlight` into an array of parts using the regular expression. This separates the text into segments that either match the search term or don’t.
  • We map through the array and check if each part matches the regex. If it matches, we wrap it in a `<span>` with the `highlight` class; otherwise, we return the part as is.
  • Finally, we render the `highlightedText` inside the `

    ` tag.

Testing and Refining the Application

Now, test your application in the browser. Type a word or phrase into the input field, and the corresponding text in the paragraph should highlight. Try different search terms and see how the highlighting adapts dynamically.

Here are some refinements you can consider:

  • Handling Edge Cases: Consider what happens when the search text contains special characters or regular expression metacharacters. You might need to escape these characters in the regular expression.
  • Performance Optimization: For very large texts, splitting and mapping can be expensive. Consider using techniques like virtualizing the text or implementing a more efficient highlighting algorithm.
  • User Experience: Add features like highlighting multiple search terms, providing feedback to the user when no matches are found, or allowing users to customize the highlight color.

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when building React applications and how to address them:

  • Incorrect State Updates: Failing to update the state correctly can lead to unexpected behavior. Always use the `setState` function provided by the `useState` hook to update state variables.
  • Missing Dependencies in `useEffect` and `useMemo`: When using `useEffect` or `useMemo`, make sure to include all dependencies in the dependency array. If a dependency is missing, your effect might not run or your memoized value might not update as expected.
  • Inefficient Rendering: Re-rendering the entire component tree unnecessarily can impact performance. Use `React.memo` or `useMemo` to optimize rendering.
  • Ignoring Key Prop Warnings: When rendering lists of elements, always provide a unique `key` prop to each element. This helps React efficiently update the DOM.
  • Incorrect Event Handling: Make sure event handlers are correctly bound to the component and that you’re preventing default behavior when necessary.

Adding More Features

Once you’ve mastered the basics, consider adding these features to enhance your text highlighter:

  • Multiple Search Terms: Allow users to enter multiple search terms separated by commas or spaces. You’ll need to modify the logic to handle multiple regular expressions or search terms.
  • Highlight Color Customization: Provide options for users to choose the highlight color. This can be done by adding a color picker or a set of predefined color options.
  • Case Sensitivity Toggle: Add a checkbox or a button to allow users to toggle case sensitivity for the search. This will involve modifying the regular expression to include or exclude the `i` flag.
  • Highlight All Matches: Ensure that all instances of the search term are highlighted, not just the first one. This is already implemented in the provided code, but it’s an important consideration.
  • Dynamic Text Input: Instead of hardcoding the text to highlight, allow users to input their own text. You can add a `textarea` element for this purpose and update the `textToHighlight` state based on user input.

Key Takeaways and Summary

In this tutorial, you’ve learned how to build a simple, interactive text highlighter in React. We covered the essential steps, from setting up the project and implementing the core highlighting logic to addressing common mistakes. You learned how to use the `useState` and `useMemo` hooks, create regular expressions, and dynamically update the DOM. By building this project, you’ve gained practical experience with React components, state management, and event handling. Remember to apply these concepts to your future projects, experiment with new features, and continue to learn and improve your skills. This text highlighter is a stepping stone to creating more complex and engaging user interfaces.

FAQ

  1. How can I make the highlighting case-sensitive?

    To make the highlighting case-sensitive, remove the `i` flag from the regular expression. Change `new RegExp(`(${searchText})`, ‘gi’)` to `new RegExp(`(${searchText})`, ‘g’)`.

  2. How do I handle special characters in the search text?

    You may need to escape special characters in the search text to prevent them from being interpreted as regular expression metacharacters. You can use a function to escape these characters before creating the regular expression.

  3. How can I highlight multiple search terms?

    You can split the search text into an array of search terms and then iterate over them, creating a separate regular expression for each term. You’ll need to adjust the logic in the `useMemo` hook to handle multiple highlights.

  4. How can I improve performance for large texts?

    For large texts, consider optimizing the highlighting algorithm. You could use techniques like virtualizing the text or implementing a more efficient search and replace mechanism to avoid performance bottlenecks.

  5. Can I use this highlighter in a production environment?

    Yes, you can use the text highlighter in a production environment. However, make sure to consider factors like performance, accessibility, and user experience. Test your application thoroughly and optimize the code for efficiency, especially if you’re working with large texts or complex use cases.

Building this text highlighter is a valuable exercise for any React developer. The principles you’ve learned – state management, dynamic rendering, and event handling – are fundamental to React development. By experimenting with the code, adding features, and refining the user experience, you’ll solidify your understanding of React and create a useful tool in the process. Remember, the best way to learn is by doing, so keep building and exploring the endless possibilities of React.

More posts