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

Troubleshooting automatic login problem in VB 2013 settings

Integrate the elements from the <template> section into the designated <slot> area

When using $http in AngularJS, an error may occur when it

Using Vuetify to send a parameter from a select option to a method as a parameter

Getting around CloudFlare's 100-second time-out restriction

Convert the class to a file upload using jQuery

What is the process of connecting a Yarn module to a Docker container in another repository?

Injecting JavaScript object values into dynamically generated modal

Why does json_encode() work for one string and fail for another?

Nested loops seem to override previous results with the final output

I'm receiving an error at initBackend that says "Cannot read properties of undefined (reading 'Vue'). Does anyone know how I can fix this issue?

The requested URL /api/users/register does not exist. Error 404

Populating a span tag with data retrieved through Ajax

Vetur is experiencing issues with template functionality, such as not properly checking data and methods

Is there a streamlined approach to signal a successful callback to $q.all without the need to define a $q.defer() variable?

An issue encountered while implementing a post method with fetch and Express

Are the features of emulation mode in IE11 identical to implementing the meta EmulateIE7 tag?

Multiple instances of the identical 'Angular application' displayed simultaneously on the webpage

Unraveling HTML elements within a string using MongoDB: A step-by-step guide

What are some methods for resolving the problem of CORS policy blocking access to retrieve data from Yahoo Finance?