Replicating a website to use at a later time

Question

Replicating a website to use at a later time

I am brand new to the world of Javascript, currently diving into JavaScript and jQuery for an issue I'm facing.

Here's what I'm trying to accomplish:

I have a selection of words ("foo", "bar")
Retrieve the current webpage's content (html, css, content)
I aim to refresh the page with "foo" and "bar" highlighted wherever they are found on the page.

All I want is to highlight any page that users open with a predefined set of words contained within it.

Right now, I'm struggling with step 1. Could someone kindly guide me towards an approach or resource I can study up on?

javascript jquery html css

Answer 1

Answer №1

To add some dynamic text highlighting on a webpage, you can use the following code snippet. Let's assume we want to highlight the word "entirely":

var term = 'entirely';
var elements = document.querySelectorAll('*');
for(var j = 0; j < elements.length; j++) {
    var item = elements[j];
    if(item.innerHTML.split('<')[0].indexOf(term) > -1) {
       item.innerHTML = item.innerHTML.replace(term, '<span style="background-color: cyan">'+term+'</span>');
    }
}

Answer 2

To add some dynamic text highlighting on a webpage, you can use the following code snippet. Let's assume we want to highlight the word "entirely":

var term = 'entirely';
var elements = document.querySelectorAll('*');
for(var j = 0; j < elements.length; j++) {
    var item = elements[j];
    if(item.innerHTML.split('<')[0].indexOf(term) > -1) {
       item.innerHTML = item.innerHTML.replace(term, '<span style="background-color: cyan">'+term+'</span>');
    }
}

Answer 3

Answer №2

Allow me to guide you in the right direction. While this code snippet may not be the optimal solution, it serves as an illustration of how the task can be accomplished:

document.body.innerHTML = document.body.innerHTML.replace(match, '<span class="match">' + match + '</span>');

Remember to style the .match class accordingly.

IMPORTANT: The match variable represents the keyword to be highlighted.

Answer 4

Allow me to guide you in the right direction. While this code snippet may not be the optimal solution, it serves as an illustration of how the task can be accomplished:

document.body.innerHTML = document.body.innerHTML.replace(match, '<span class="match">' + match + '</span>');

Remember to style the .match class accordingly.

IMPORTANT: The match variable represents the keyword to be highlighted.

Answer 5

Answer №3

If you want to extract the complete HTML content of a webpage, you can achieve this by:

var pageHTML = document.body.innerHTML;

To replace every instance of a word with a specific markup using JavaScript, you can use the following code snippet:

"the sky is blue".replace(/sky/g,"<span class='highlight'>sky</span>");

You can then define the 'highlight' class in your CSS file for customization.

In order to narrow down your search to only text within the HTML structure, consider refining your criteria accordingly.

Answer 6

If you want to extract the complete HTML content of a webpage, you can achieve this by:

var pageHTML = document.body.innerHTML;

To replace every instance of a word with a specific markup using JavaScript, you can use the following code snippet:

"the sky is blue".replace(/sky/g,"<span class='highlight'>sky</span>");

You can then define the 'highlight' class in your CSS file for customization.

In order to narrow down your search to only text within the HTML structure, consider refining your criteria accordingly.

Answer 7

Answer №4

You can check out a demo on CodePen here.

$(document).ready(function(){
  $("#selector").on('keyup', function(e){
    var inputText = $.trim($(this).val());
    if(inputText !== '' && inputText !== ' '){
        var regexPattern = new RegExp(inputText, "gi");
    }
    $('p, div, span').each(function(index){
        var element = this;
        var originalText = $(element).text();
            originalText = originalText.replace(regexPattern, function($match){
            return "<span style='background:yellow'>" + $match + "</span>";
        });
        $(element).html(originalText); 
    });   
  });
});

Answer 8

You can check out a demo on CodePen here.

$(document).ready(function(){
  $("#selector").on('keyup', function(e){
    var inputText = $.trim($(this).val());
    if(inputText !== '' && inputText !== ' '){
        var regexPattern = new RegExp(inputText, "gi");
    }
    $('p, div, span').each(function(index){
        var element = this;
        var originalText = $(element).text();
            originalText = originalText.replace(regexPattern, function($match){
            return "<span style='background:yellow'>" + $match + "</span>";
        });
        $(element).html(originalText); 
    });   
  });
});

Replicating a website to use at a later time

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Problem encountered with a form element generating additional input fields upon click of a specific button

Is there a way to export static HTML from Next.js to different directories at once?

What is the best way to group data by a specific value within a nested object when using ReactJS material-table?

appear on the screen of a Samsung smart television

While attempting to deploy on Vercel, I encountered an error while constructing my Next.js project

Methods for identifying when a Vue component has been updated based on property change

Mastering the use of expressions in ng-click and ng-show in AngularJS

The concept of React.cloneElement, higher order components, and transclusion in React

various operations in routes using Express.js

Guide on looping through an array of objects and eliminating each item using JavaScript

Angular and Bootstrap do not support margin styles

Extension for web design snippet

Unable to view new content as window does not scroll when content fills it up

Fixed Navbar at the top of the page with no elements underneath

How can I extract the URL from the event listener in Cordova's in-app browser event and then automatically close it once a specific URL is reached?

Apply a unique font to the gridview that is not universally available on all systems

Experiencing trouble with setting values in JavaScript?

The autocomplete feature in React is not displaying properly due to a problem with rendering

Encountering a JavaScript heap out of memory error during the upgrade from Angular v11 to v12

Troubleshooting compatibility issues between jQuery scrollLeft and Angular