"Enhancing text by highlighting specific words and enclosing them in a new element with a data attribute – a simple guide

Question

"Enhancing text by highlighting specific words and enclosing them in a new element with a data attribute – a simple guide

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet est tempus, fermentum ligula et, hendrerit nisl. Praesent tempor eget quam quis auctor. Vivamus mollis mauris id sem aliquam, vel fermentum neque fringilla. Morbi malesuada accumsan augue ut hendrerit. Aenean commodo vulputate lacinia. Integer at purus eget arcu venenatis consectetur vel sed sem. Mauris quis est id ligula aliquam tempor a nec neque. Donec scelerisque velit ac metus aliquet, in euismod nisl lacinia. Quisque imperdiet gravida facilisis. In hac habitasse platea dictumst. Quisque vel erat congue, consequat libero eget, blandit sapien. Suspendisse potenti. Praesent at mollis purus.</p>

CSS:

.highlight {
  color: red;
}

JS:

$(function(){
    
  $('p').click(function(){
    // get highlighted words
    
    // get user input
    var user_input = window.prompt();
    
    // put highlighted words in <span class="highlight"></span> element
    // and add data-id to the span element
    // expected output:
    // <p>... <span class="highlight" data-id="user input here">highlighted words here</span> ...</p>
  });
  
});

I have content in a p tag with specific requirements for highlighting:

User selects a word or phrase within the text
User is prompted to enter additional information
The selected words are wrapped in a span tag with a custom attribute (data-id) populated by the user's input from the prompt

How can I implement this functionality?

javascript html jquery css

Answer 1

Answer №1

Expanding on the concepts discussed in this forum post to fit your specific scenario

function selectHTML() {
    try {
        if (window.ActiveXObject) {
            var selection = document.selection.createRange();
            return selection.htmlText;
        }
    
        var newElement = document.createElement("span");
        var range = getSelection().getRangeAt(0);
        range.surroundContents(newElement);
        return newElement.innerHTML;
    } catch (error) {
        if (window.ActiveXObject) {
            return document.selection.createRange();
        } else {
            return getSelection();
        }
    }
}

$(function() {
    $('#changeColor').click( function() {
        var value = prompt("Enter a value");
        var selectedContent = selectHTML();
        $('span').addClass('highlight').attr('data-id',value);
    });
});

.highlight{
color:red;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet est tempus, fermentum ligula et, hendrerit nisl. Praesent tempor eget quam quis auctor. Vivamus mollis mauris id sem aliquam, vel fermentum neque fringilla. Morbi malesuada accumsan augue ut hendrerit. Aenean commodo vulputate lacinia. Integer at purus eget arcu venenatis consectetur vel sed sem. Mauris quis est id ligula aliquam tempor a nec neque. Donec scelerisque velit ac metus aliquet, in euismod nisl lacinia. Quisque imperdiet gravida facilisis. In hac habitasse platea dictumst. Quisque vel erat congue, consequat libero eget, blandit sapien. Suspendisse potenti. Praesent at mollis purus.</p>
<input id="changeColor" type="button" value="Select text and Change Style" />

Answer 2

Expanding on the concepts discussed in this forum post to fit your specific scenario

function selectHTML() {
    try {
        if (window.ActiveXObject) {
            var selection = document.selection.createRange();
            return selection.htmlText;
        }
    
        var newElement = document.createElement("span");
        var range = getSelection().getRangeAt(0);
        range.surroundContents(newElement);
        return newElement.innerHTML;
    } catch (error) {
        if (window.ActiveXObject) {
            return document.selection.createRange();
        } else {
            return getSelection();
        }
    }
}

$(function() {
    $('#changeColor').click( function() {
        var value = prompt("Enter a value");
        var selectedContent = selectHTML();
        $('span').addClass('highlight').attr('data-id',value);
    });
});

.highlight{
color:red;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet est tempus, fermentum ligula et, hendrerit nisl. Praesent tempor eget quam quis auctor. Vivamus mollis mauris id sem aliquam, vel fermentum neque fringilla. Morbi malesuada accumsan augue ut hendrerit. Aenean commodo vulputate lacinia. Integer at purus eget arcu venenatis consectetur vel sed sem. Mauris quis est id ligula aliquam tempor a nec neque. Donec scelerisque velit ac metus aliquet, in euismod nisl lacinia. Quisque imperdiet gravida facilisis. In hac habitasse platea dictumst. Quisque vel erat congue, consequat libero eget, blandit sapien. Suspendisse potenti. Praesent at mollis purus.</p>
<input id="changeColor" type="button" value="Select text and Change Style" />

Answer 3

Answer №2

If you utilize the JSFiddle provided in the comment, you can accomplish it as shown below:

function selectHTML() {
  try {
    if (window.ActiveXObject) {
      var c = document.selection.createRange();
      return c.htmlText;
    }

    var nNd = document.createElement("span");
    var w = getSelection().getRangeAt(0);
    w.surroundContents(nNd);
    return nNd.innerHTML;
  } catch (e) {
    if (window.ActiveXObject) {
      return document.selection.createRange();
    } else {
      return getSelection();
    }
  }
}

$(function() {
  $('p').click(function() {
    var selected = selectHTML();
    var user_input = window.prompt();
    $('span').addClass('highlight').attr('data-id', user_input);
  });
});

.highlight {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet est tempus, fermentum ligula et, hendrerit nisl. Praesent tempor eget quam quis auctor. Vivamus mollis mauris id sem aliquam, vel fermentum neque fringilla. Morbi malesuada accumsan
  augue ut hendrerit. Aenean commodo vulputate lacinia. Integer at purus eget arcu venenatis consectetur vel sed sem. Mauris quis est id ligula aliquam tempor a nec neque. Donec scelerisque velit ac metus aliquet, in euismod nisl lacinia. Quisque imperdiet
  gravida facilisis. In hac habitasse platea dictumst. Quisque vel erat congue, consequat libero eget, blandit sapien. Suspendisse potenti. Praesent at mollis purus.</p>

Answer 4

If you utilize the JSFiddle provided in the comment, you can accomplish it as shown below:

function selectHTML() {
  try {
    if (window.ActiveXObject) {
      var c = document.selection.createRange();
      return c.htmlText;
    }

    var nNd = document.createElement("span");
    var w = getSelection().getRangeAt(0);
    w.surroundContents(nNd);
    return nNd.innerHTML;
  } catch (e) {
    if (window.ActiveXObject) {
      return document.selection.createRange();
    } else {
      return getSelection();
    }
  }
}

$(function() {
  $('p').click(function() {
    var selected = selectHTML();
    var user_input = window.prompt();
    $('span').addClass('highlight').attr('data-id', user_input);
  });
});

.highlight {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet est tempus, fermentum ligula et, hendrerit nisl. Praesent tempor eget quam quis auctor. Vivamus mollis mauris id sem aliquam, vel fermentum neque fringilla. Morbi malesuada accumsan
  augue ut hendrerit. Aenean commodo vulputate lacinia. Integer at purus eget arcu venenatis consectetur vel sed sem. Mauris quis est id ligula aliquam tempor a nec neque. Donec scelerisque velit ac metus aliquet, in euismod nisl lacinia. Quisque imperdiet
  gravida facilisis. In hac habitasse platea dictumst. Quisque vel erat congue, consequat libero eget, blandit sapien. Suspendisse potenti. Praesent at mollis purus.</p>

"Enhancing text by highlighting specific words and enclosing them in a new element with a data attribute – a simple guide

Answer №1

Answer №2

Similar questions

The textbox fails to update when the condition in the IF statement is met

Acquiring HTML form data using JavaScript

Launch a facebox for a PHP form action and hyperlink

"Click here to access the downloadable content obtained through web scraping

Is the mobile site displaying CSS pixels in the physical pixel resolution?

Guide to sending DevExtreme data grids to ASP.NET MVC controllers

html - Link not clickable inside accordion header

What is the best way to create a screen capture of a webpage using a URL?

Using react-router, learn how to access the element ID to display all data from the clicked element

"Utilizing jQuery to integrate an Ajax-powered Gauge using Google Visualization API

Achieving optimal functionality of @media queries when using buttons

Error: Unable to access the 'TigerNo' property of an undefined object. Setting tempObj['TigerNo'] to the default TigerNo value from the sports record

Improving the way text entered in an input box is displayed using HTML table cells

The resetting of checkboxes in the Boostrap form validation form is not functioning properly

What causes AngularJS to generate an error when attempting to construct a URL for the src attribute of an iframe?

Formik introduces a fresh Collection of values rather than just appending a single value

Issue with Bootstrap 4 Carousel Indicators Not Updating Active State Properly

Ways to track the visit data for different languages in Google Analytics when the language is not included in the URL

Locating a specific value from an href using BeautifulSoup and regular expressions

javascript is failing to display the appropriate message at the correct moment