Building a Simple HTML-Based Interactive Text Highlighter: A Beginner’s Tutorial

Written by

learnmodernwebdevelopment

in

In the digital age, we’re constantly bombarded with text. Whether it’s reading articles, reviewing documents, or simply browsing the web, we often need to highlight specific portions of text to emphasize key information. While many websites and applications offer built-in highlighting features, understanding how to create your own is a valuable skill for any aspiring web developer. This tutorial will guide you through building a simple, interactive text highlighter using just HTML, CSS, and a touch of JavaScript. We’ll explore the fundamental concepts, step-by-step instructions, and common pitfalls to avoid, making it easy for beginners to grasp the principles of web development and interactivity.

Why Build a Text Highlighter?

Creating a text highlighter isn’t just about adding a visual effect; it’s about understanding how to manipulate the Document Object Model (DOM), handle user interactions, and apply dynamic styling. These are core concepts in web development that are applicable across a wide range of projects. By building this simple highlighter, you’ll gain practical experience in:

  • DOM Manipulation: How to select and modify elements on a webpage.
  • Event Handling: How to respond to user actions, such as mouse clicks.
  • CSS Styling: How to apply visual styles to elements dynamically.
  • JavaScript Fundamentals: How to write basic JavaScript functions and integrate them with HTML and CSS.

Furthermore, this project provides a solid foundation for more complex features, such as highlighting across multiple pages, saving highlighted text, and integrating with other web applications.

Setting Up the HTML Structure

The first step is to create the basic HTML structure for our text highlighter. We’ll start with a simple HTML file containing some text that we want to highlight. Open your favorite text editor (like VS Code, Sublime Text, or Notepad) and create a new file named `index.html`. Add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Text Highlighter</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>Welcome to My Text Highlighter</h2>
        <p id="highlightableText">
            This is a sample paragraph. We will highlight specific words in this text.
            For example, we might highlight the word "highlight" or "sample".
            This is just a demonstration.
        </p>
    </div>
    <script src="script.js"></script>
</body>
</html>

Let’s break down this code:

  • <!DOCTYPE html>: Declares the document as HTML5.
  • <html>: The root element of the HTML page.
  • <head>: Contains meta-information about the HTML document, such as the title and character set.
  • <meta charset=”UTF-8″>: Specifies the character encoding for the document.
  • <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: Configures the viewport for responsive design.
  • <title>: Sets the title of the HTML page, which appears in the browser tab.
  • <link rel=”stylesheet” href=”style.css”>: Links an external CSS stylesheet (we’ll create this file later).
  • <body>: Contains the visible page content.
  • <div class=”container”>: A container to hold the content.
  • <h2>: A heading for the page.
  • <p id=”highlightableText”>: A paragraph of text with an `id` attribute. This is the text we’ll be highlighting. The `id` is crucial because it allows us to target this specific paragraph with our JavaScript code.
  • <script src=”script.js”></script>: Links an external JavaScript file (we’ll create this file later).

Save this file as `index.html` in a new folder. This will be the foundation of our project. Next, we will style it with CSS.

Styling with CSS

Now, let’s create a CSS file to style our text highlighter. Create a new file named `style.css` in the same folder as `index.html`. Add the following CSS code:


.container {
    width: 80%;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#highlightableText {
    font-size: 16px;
    line-height: 1.6;
}

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

Here’s what each part of the CSS does:

  • `.container`: Styles the main container, setting its width, margins, font, padding, border, and rounded corners. This creates a visually appealing layout for the content.
  • `#highlightableText`: Styles the paragraph containing the text to be highlighted, setting the font size and line height.
  • `.highlighted`: This is the most important part. This style will be applied to the text that is highlighted. It sets the background color to yellow and makes the text bold.

Save `style.css` in the same directory as your `index.html` file. This CSS will visually style our text and the highlighted sections.

Adding Interactivity with JavaScript

The core of our text highlighter lies in the JavaScript code. This is where we’ll handle user interactions and dynamically apply the highlighting. Create a new file named `script.js` in the same folder as `index.html` and `style.css`. Add the following JavaScript code:


// Get the text element
const textElement = document.getElementById('highlightableText');

// Add a click event listener to the text element
textElement.addEventListener('click', function(event) {
    // Get the selected text
    const selection = window.getSelection();
    const selectedText = selection.toString();

    // Check if any text is selected
    if (selectedText) {
        // Create a range object from the selection
        const range = selection.getRangeAt(0);

        // Create a span element to wrap the selected text
        const span = document.createElement('span');
        span.className = 'highlighted';

        // Surround the selected text with the span
        range.surroundContents(span);

        // Clear the selection
        selection.removeAllRanges();
    }
});

Let’s break down this JavaScript code:

  • `const textElement = document.getElementById(‘highlightableText’);`: This line selects the HTML element with the id “highlightableText” (our paragraph) and stores it in the `textElement` variable. This is how we interact with the HTML from our JavaScript.
  • `textElement.addEventListener(‘click’, function(event) { … });`: This line adds an event listener to the `textElement`. It listens for ‘click’ events. When the user clicks on the text, the function inside the curly braces will be executed.
  • `const selection = window.getSelection();`: This gets the user’s current text selection.
  • `const selectedText = selection.toString();`: This converts the selection into a string.
  • `if (selectedText) { … }`: This conditional statement checks if any text is actually selected. The rest of the code inside this block will only run if the user has selected text.
  • `const range = selection.getRangeAt(0);`: This gets the range object representing the selected text. The range object defines the start and end points of the selection.
  • `const span = document.createElement(‘span’);`: This creates a new `span` HTML element. We’ll use this to wrap the highlighted text.
  • `span.className = ‘highlighted’;`: This adds the class “highlighted” to the span element. This class will apply the styles we defined in our `style.css` file (yellow background and bold text).
  • `range.surroundContents(span);`: This is the core of the highlighting. This line wraps the selected text (the contents of the `range` object) with the `span` element.
  • `selection.removeAllRanges();`: This clears the text selection after highlighting, so the user can easily select other text.

Save `script.js` in the same directory as your other files. Now, when you open `index.html` in your browser and click and drag to select text, the selected text should be highlighted with a yellow background and bold font. Congratulations, you’ve built your first interactive text highlighter!

Step-by-Step Instructions

Here’s a recap of the steps involved in creating this text highlighter:

  1. Create `index.html`: This file contains the basic HTML structure, including the text to be highlighted and links to your CSS and JavaScript files.
  2. Create `style.css`: This file contains the CSS styles for the page, including the `.highlighted` class, which defines the appearance of the highlighted text.
  3. Create `script.js`: This file contains the JavaScript code that handles the click event, gets the selected text, creates a `span` element, applies the `.highlighted` class, and wraps the selected text with the `span`.
  4. Link the Files: Ensure that your `index.html` file correctly links to your `style.css` and `script.js` files using the `<link>` and `<script>` tags, respectively.
  5. Open in Browser: Open `index.html` in your web browser.
  6. Select Text: Click and drag your mouse over the text you want to highlight.
  7. See the Magic: The selected text should now be highlighted with a yellow background and bold font.

Common Mistakes and How to Fix Them

When building a text highlighter, you might encounter a few common issues. Here are some of them and how to resolve them:

  • The Highlight Isn’t Appearing:
    • Problem: The highlighted text isn’t changing color or applying the intended styles.
    • Solution: Double-check the following:
      • Make sure the `style.css` file is correctly linked in your `index.html` file.
      • Ensure that the CSS class name in your JavaScript (`.highlighted`) matches the class name in your `style.css` file.
      • Inspect the HTML in your browser’s developer tools (usually accessed by right-clicking and selecting “Inspect” or “Inspect Element”) to see if the `span` element with the correct class is being created and applied.
  • The Highlight Doesn’t Work on All Text:
    • Problem: The highlighting only works on a portion of the text, or not at all.
    • Solution:
      • Verify that your JavaScript code is correctly selecting the text element you want to highlight using `document.getElementById(‘highlightableText’)`. If the ID doesn’t match the element in your HTML, the code won’t work.
      • Ensure that you’re using the correct event listener (`click`) and that it’s attached to the correct element.
  • Highlighting Overlaps:
    • Problem: When you highlight text that’s already highlighted, the highlights might overlap or not appear correctly.
    • Solution: This is a more advanced problem, but you can prevent overlaps by checking if the selected text is already within a highlighted `span` element. You’d need to modify your JavaScript to check this before applying the highlight. This could involve checking the `parentNode` of the selected text or using a more sophisticated approach.
  • Highlighting Doesn’t Clear After Selection:
    • Problem: The selection remains highlighted even after you release the mouse button.
    • Solution: Make sure you have the line `selection.removeAllRanges();` in your JavaScript code, after you’ve wrapped the selected text in the `span` element. This clears the user’s selection, which prevents it from remaining highlighted.

Key Takeaways and Summary

In this tutorial, we’ve successfully built a simple, yet functional, text highlighter using HTML, CSS, and JavaScript. We’ve learned how to structure our HTML, style our elements with CSS, and add interactive behavior with JavaScript. You’ve gained practical experience with DOM manipulation, event handling, and dynamic styling – fundamental concepts in web development.

Here’s a summary of the key takeaways:

  • HTML Structure: Use HTML to define the content and structure of your text, including the paragraph containing the text to be highlighted.
  • CSS Styling: Use CSS to define the appearance of the highlighted text (e.g., background color, font weight).
  • JavaScript Interaction: Use JavaScript to listen for click events, get the selected text, create a `span` element, apply the `.highlighted` class, and wrap the selected text with the `span`.
  • DOM Manipulation: The core of the functionality involves manipulating the DOM to wrap the selected text with a `span` element, which is then styled using CSS.
  • Event Handling: The `addEventListener` method allows us to listen for user interactions (e.g., clicks) and trigger specific actions.

By understanding these concepts, you can adapt and extend this project to create more sophisticated highlighting features, such as different highlight colors, the ability to save highlighted text, and integration with other web applications.

FAQ

Here are some frequently asked questions about the text highlighter:

  1. Can I change the highlight color?

    Yes, absolutely! You can easily change the highlight color by modifying the `background-color` property in the `.highlighted` class within your `style.css` file. For example, to change the highlight color to blue, change `background-color: yellow;` to `background-color: blue;`.

  2. How can I highlight multiple words or phrases at once?

    To highlight multiple words or phrases, you’d need to modify the JavaScript code to iterate through the text and highlight each instance of the desired words or phrases. This would involve using regular expressions or string searching methods to find the words, and then wrapping each instance in a `span` element with the `.highlighted` class.

  3. Can I make the highlighter work on any website?

    Yes, with some modifications. You would need to inject the HTML, CSS, and JavaScript into the website. This can be done using browser extensions or by adding the code directly to the website’s HTML if you have access to it. However, be aware that injecting code into websites you don’t control may violate their terms of service.

  4. How do I remove the highlight?

    Currently, this simple implementation does not include a way to remove the highlighting. To add this functionality, you could add an event listener (e.g., a right-click) that removes the `span` element wrapping the highlighted text. You would need to modify your JavaScript to detect the `span` and remove it, or replace it with the original text.

Building this text highlighter is more than just a coding exercise; it’s a gateway to understanding how websites respond to user interactions and how you can dynamically change them. The skills acquired are applicable to many other web development projects, and the basic structure can be expanded to add features, such as different colors, the ability to remove highlights, or to save the highlighted text. The possibilities are truly limited only by your imagination and your willingness to learn.

More posts