Sling Academy
Home/JavaScript/Highlight Specific Text on a Page via JavaScript URL Fragments

Highlight Specific Text on a Page via JavaScript URL Fragments

Last updated: December 13, 2024

JavaScript URL fragments provide an efficient way to direct users to particular sections of a webpage. However, with certain modern browser capabilities, it's possible to highlight specific text within those sections, improving the user experience significantly. Highlighting text can aid in quick information retrieval, guiding users directly to the content they need.

Understanding URL Fragments

Before diving into highlighting specific text, it's essential to understand URL fragments. Typically, URL fragments follow a '#' in a URL. They are most commonly used to navigate to a specific part of a page, where an element's id matches the fragment part. For example:

<a href="#section1">Go to Section 1</a>
<div id="section1">This is Section 1</div>

The Basics of Text Fragments

Text fragments are an extension to the classic hash fragments and are introduced with the "textFragment" syntax as #:~:text=. Here's how a fragment can look:

https://example.com#:~:text=necessary%20text

This syntax illuminates specific text within a webpage once the URL is accessed in a browser that supports this feature.

Leveraging JavaScript for Highlighting Text

Although text fragments can handle basic needs, JavaScript can be leveraged to provide more complex text highlighting:

// Function to highlight text based on a fragment
function highlightTextFromFragment() {
  const fragment = window.location.hash;
  if (fragment.startsWith('#:~:text=')) {
    const text = decodeURIComponent(fragment.substring(10));
    const elements = document.querySelectorAll('body');
    elements.forEach(element => {
      highlightWords(element, text);
    });
  }
}

// Function to highlight matching words
function highlightWords(element, searchText) {
  if (element.nodeType === 3) {  // Text node
    const index = element.textContent.indexOf(searchText);
    if (index !== -1) {
      const span = document.createElement('span');
      span.className = 'highlight';
      const text = element.textContent;
      span.textContent = text.slice(index, index + searchText.length);
      const parent = element.parentNode;
      parent.insertBefore(document.createTextNode(text.slice(0, index)), element);
      parent.insertBefore(span, element);
      parent.insertBefore(document.createTextNode(text.slice(index + searchText.length)), element);
      parent.removeChild(element);
    }
  } else {
    element.childNodes.forEach(child => highlightWords(child, searchText));
  }
}

// Call function on page load
window.onload = highlightTextFromFragment;

With this code snippet, when the page loads, the JavaScript checks if a text fragment exists in the URL. If it does, it highlights the specified text within the page, providing a visually guided structure for the user.

Customizing Highlights

The highlight appearance can be customized through CSS. Adding distinctive styles helps draw attention to highlighted text, making it more recognizable:

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

With CSS, you can adjust properties like `background-color`, `font-weight`, and even `font-style` to create the desired emphasis on the highlighted text.

Considerations and Compatibility

While text fragments offer a straightforward mechanism to highlight text, not all browsers may fully support them. As of late 2023, popular browsers like Chrome and Edge have good support, but Safari and Firefox are still limited.

Therefore, it is always a good practice to test your implementation across various browsers to ensure consistent functionality. The JavaScript approach offered can also serve as a workaround for these limitations.

By combining URL fragments and JavaScript, you can create a sophisticated way of leading users to and enhancing their interaction with crucial content portions of your webpage.

Next Article: Improve Deep Linking and Sharing Using JavaScript Fragment Directives

Previous Article: Enable Text Directives for Links Using URL Fragment Text Directives in JavaScript

Series: Web APIs – JavaScript Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration