Replicate the action of highlighting a section of a website and copying it to the clipboard using JavaScript

Question

Replicate the action of highlighting a section of a website and copying it to the clipboard using JavaScript

I am currently in the process of transferring an outdated application to a new platform, but I'm facing difficulty understanding the changed JavaScript code.

My goal is to find a parent HTML element named "output" and then select all its child elements as if they were highlighted by the user.

Once that is done, I want to be able to copy this selection to the clipboard.

Despite my efforts, I haven't been able to find a satisfactory solution online for the initial task, and I'm concerned that even if I do solve it, there might still be obstacles with the second part.

If anyone has suggestions on how to achieve this, your help would be greatly appreciated.

EDIT: The HTML content is dynamically generated, hence I have provided a simplified version here instead of the actual layout.

<div id="output">
    <h1>My Name</h1>
    <img src="" />
</div>

What I aim to do is highlight the displayed HTML (excluding the outer HTML) and then copy it to the clipboard.

The copied result should resemble the following:

My Name

And not like this:

<div id="output"><h1>My Name</h1><img src="" /></div>

I have considered using JavaScript range for this task, but I'm unsure about how to select all the contents of the parent element "output".

javascript vue.js

Answer 1

Answer №1

By referring to Jason's response, you can easily achieve text copying functionality by adding the line

document.execCommand("copy");

after creating the selection.

If pasted into a document that supports text formatting preservation, such as Microsoft Word, the copied text will appear exactly as it did on the original webpage.

function selectContent(elementId) {
    let selectedElement = document.getElementById(elementId);

    if (document.body.createTextRange) {
        const range = document.body.createTextRange();
        range.moveToElementText(selectedElement);
        range.select();
    } else if (window.getSelection) {
        const selection = window.getSelection();
        const newRange = document.createRange();
        newRange.selectNodeContents(selectedElement);
        selection.removeAllRanges();
        selection.addRange(newRange);
    } else {
        console.warn("Text selection not supported in this browser.");
    }
}

const clickToCopy = document.querySelector('.click-me');
clickToCopy.addEventListener('click', () => { selectContent('output'); document.execCommand("copy");});

<div id="output">
   <h1>My Name</h1>
   <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH4AAAB+CAYAAADiI6WIAAAPeUlEQVR4nO3cX2xU14HH8a8awJ3SWASCN3+arJ0/gIsLLKgkhq6d  ... truncated for brevity
  </div>
  <p class="click-me">Click me!</p>

Answer 2

By referring to Jason's response, you can easily achieve text copying functionality by adding the line

document.execCommand("copy");

after creating the selection.

If pasted into a document that supports text formatting preservation, such as Microsoft Word, the copied text will appear exactly as it did on the original webpage.

function selectContent(elementId) {
    let selectedElement = document.getElementById(elementId);

    if (document.body.createTextRange) {
        const range = document.body.createTextRange();
        range.moveToElementText(selectedElement);
        range.select();
    } else if (window.getSelection) {
        const selection = window.getSelection();
        const newRange = document.createRange();
        newRange.selectNodeContents(selectedElement);
        selection.removeAllRanges();
        selection.addRange(newRange);
    } else {
        console.warn("Text selection not supported in this browser.");
    }
}

const clickToCopy = document.querySelector('.click-me');
clickToCopy.addEventListener('click', () => { selectContent('output'); document.execCommand("copy");});

<div id="output">
   <h1>My Name</h1>
   <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH4AAAB+CAYAAADiI6WIAAAPeUlEQVR4nO3cX2xU14HH8a8awJ3SWASCN3+arJ0/gIsLLKgkhq6d  ... truncated for brevity
  </div>
  <p class="click-me">Click me!</p>

Replicate the action of highlighting a section of a website and copying it to the clipboard using JavaScript

My Name

Answer №1

Similar questions

The final piece left in stitching together an array

I am currently seeking a way to validate if a variable corresponds to the choice made in the dropdown menu. Any suggestions on how to accomplish this task?

Express Promises Linked Together: Lack of Data in Last Stage

Discover a simple method for comparing JSON responses and UI elements by utilizing two arrays in a for loop within your Cypress automation tests

Is there a way to perform a nextAuth sign in using Postman?

The $scope object in AngularJS has not been properly defined and

Implementing dynamic AngularJS functionality within an older HTML structure using JQuery

Incorporating AngularJS and Bootstrap for seamless pagination experience

Ways to obtain every image placed onto an element

Avoid having Masonry load all divs simultaneously

Retrieve every video on React.js channel from YouTube

Can you explain the contrast between window.performance and PerformanceObserver?

Having trouble utilizing Reactjs Pagination to navigate through the data

Error: The global variable cannot be emptied due to an issue with the Ajax request

Unable to extract attributes from a different model within Sails.js

An error has occurred in the callback function for the watcher "function () { return this._data.$$state }": "Error: [vuex] It is forbidden to modify the vuex store state outside of a mutation"

Angular refuses to showcase the object

Need to know how to invoke a function from an http callback function that resides in a separate file? Simply use the `app.get("/", callbackFun)` method

Error TS2307: Module 'calculator' could not be located

What's stopping the error exception from showing up on the client side?