Develop a duplication of the selected text without the need for the clipboard

Looking to implement an internal clipboard with a history feature for my application. Unfortunately, using the clipboard API will require user permission which is not feasible.

I want to ensure that formatting such as bold, italics, and strikethrough is preserved.

Considering extracting content from window.getSelection(), but struggling to clone all HTML within the selection easily.

The extracted contents will need to be displayed in another container element within the app.

Any suggestions on how to accomplish this would be greatly appreciated.

Best regards, Matthias

EDIT: Currently intercepting the copy event and replacing it with a custom function. Need to extract content starting from the anchorNode, cutting potential offsets, moving towards the focusNode (also with offset). Additionally, any unknown or unwanted tags (such as span, h1, div, etc.) must be removed while preserving text content. Hoping someone has tackled a similar task to help save time :/

javascripttypescript

Answer №1

If you're looking for a way to copy content without needing any permissions, the copy event could be the solution for you.

var clipHistory = [];
document.addEventListener('copy', (event) => {
    const selection = document.getSelection();
    clipHistory.push(selection.toString());
    event.preventDefault();      // optional, it prevents modifying the user's clipboard
});
// other functions can access clipHistory

An added benefit is that the copy event has excellent browser support.

Unfortunately, using this method may remove formatting. One workaround is to utilize a 

<div contenteditable id="parse-div"></div>
and manually trigger the parse event.

I came across an interesting class called Range, but it seems unable to specify start and end offsets for non #text elements based on my understanding.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Building a custom Vue layout within Laravel UI

Currently, I am utilizing Laravel 8 along with laravel/ui 3.4 for the front end of my project. My goal is to establish a fixed sidebar, footer, and a designated area for the router-view. In my routes/web.php file: Route::view('/{any}', 'hom ...

javascriptphplaravelvue.js

Updating row values in an Angular table

I have a reusable table with the [cellData]="row" attribute to populate each cell on the table (see sample table in the screenshot). My question is, how can we replace the null values on the template with "---" so that instead of displ ...

javascriptangulartypescript

Organize the HTML output generated by a PHP array

There must be a simple solution to this, but for some reason, it's escaping me right now. I've created custom HTML/CSS/JS for a slider that fetches its content from an array structured like this: $slides = [ [ 'img' = ...

javascriptphpjqueryhtmlcss

What is the best way to transform parameters in axios requests into objects?

Within my ReactJs app, I have implemented the following code: axios .get(`/shipping/get-shipping-values`, { params: { products: [ { ...product, quantity, }, ], ...

javascriptnode.jsexpressaxios

Is it possible to generate multiple modal windows with similar designs but varying content?

I am facing a challenge with 140 link items that are supposed to trigger a modal window displaying a user profile for each link. The issue is that each user profile contains unique elements such as three images, a profile picture, text paragraph, and socia ...

javascriptjqueryhtmlcssmodal-dialog

What is causing these dynamic carousels to malfunction in Chrome?

After using Agile Carousel successfully for a while, I am now experiencing issues with it not working properly in Safari and Chrome, although it functions fine on Firefox and Safari for iPad. On this specific page, the carousel stops at the second image, ...

javascripthtml

Calculating the total value of individual sections using Jquery

I have multiple sections, each containing three input fields: <div class="product_quantity"> <div class="color-quantity"> <input onkeydown="return myFunction(event);" name="custom_small" class="custom_small" type="text"> ...

javascriptjqueryajaxinput

progressing both forward and backward through every month

I am currently working on a project that involves creating a calendar using JavaScript. I have implemented functionalities where I can navigate back and forth through months, fetching the days within each month. However, I am facing an issue where if I go ...

javascriptreactjs

Eliminable Chips feature in the Material UI Multiple Select component

The Material UI documentation showcases a multiple select example where the selected options are displayed using the Chip component and the renderValue prop on the Select. By default, clicking on the current value opens the list of available options. I am ...

javascriptreactjsformsevent-handlingmaterial-ui

Omit the <span> tag when exporting to XLS format

Currently, I have a functioning jQuery DataTable that utilizes the TableTools plug-in and includes <span> elements in one of the columns for each row. When clicking on the export button, my goal is to exclude or hide the <span> elements from t ...

javascriptjquerydatatablestabletools

Is it possible for me to generate values using PHP that can be easily read by JavaScript?

I'm currently building a website and I am facing some challenges when trying to incorporate JavaScript for real-time calculations. Here are my issues: Is there a more efficient way to avoid manually typing out the code for each level up to 90, lik ...

phpjavascripthtml

What's causing the "* before initialization" error in Vue with TypeScript?

I am encountering an issue with my code where I get the error "Cannot access 'AuthCallback' before initialization" when attempting to call the router function in the AuthCallback component. What could be causing this problem? The desired function ...

typescriptvue.jsvue-router

A singular Vuejs Pinia store utilizing namespaced actions

Is it possible to separate pinia actions into two distinct namespaces, allowing access through properties n1 and n2 like this: // current store.n1a('hi') store.n2b() // wanted store.n1.a('hi') store.n2.b() // cumbersome workaround: sto ...

javascriptvue.jsvuejs3pinia

Switch positions of two objects in JavaScript

Check out the code snippet below: MyObject.prototype.doIt = function() { let a = this.obj1; let b = this.obj2; } I need to find a way to switch the values of this.obj1 and this.obj2, making obj1 take on the value of obj2 and vice versa. Pleas ...

javascriptswap

Typescript does not support index signatures with bracket property accessor when importing using the `import * as`

Currently learning typescript and in the process of converting a large program from javascript. While fixing errors and adding types, I'm stuck on this one particular issue. Here's myModule.ts: export const foo = { ... } export const bar = { .. ...

typescript

Use a for loop to iterate through elements and retrieve input values using getElementById()

As I work through a for loop in JavaScript, I am utilizing the getElementById() method to fetch multiple input values. To begin, I dynamically created various input boxes and assigned distinct id's using a for loop. Subsequently, I am employing anoth ...

javascripthtmlloopsgetelementbyid

Tips for implementing assertions within the syntax of destructuring?

How can I implement type assertion in destructuring with Typescript? type StringOrNumber = string | number const obj = { foo: 123 as StringOrNumber } const { foo } = obj I've been struggling to find a simple way to apply the number type assertio ...

typescript

The maximum property in a Mongoose schema does not have any impact or

const mongoose = require("mongoose"); const PostSchema = new mongoose.Schema( { user_id: { type: String, required: true, }, content: { type: String, max: 150, required: true, }, }, { timest ...

javascriptnode.jsmongodbexpressmongoose

Using Javascript to pass the value of a selected checkbox

I am having an issue with passing a row value to a different function when a user clicks on a checkbox in the last column of a table. The code I have written doesn't seem to be firing as expected. Can anyone help me figure out what might be missing in ...

javascriptjqueryasp.netajax

Is it possible to determine which child element is currently in view within a scrollable parent div?

In an attempt to replicate a "current page" feature using divs, similar to a PDF reader. document.addEventListener("DOMContentLoaded", function(event) { var container = document.getElementById("container"); container.onscroll = function() { let ...

javascripthtmlcssscroll