Removing styles from text when copying / cutting with CSS or Javascript

Question

Hey,

Noodling continued well on this subject: How to copy / cut text without tidying up any luggage style (background color, color, etc.)?

A couple of attack paths that were thwarted:

• Text style differently use :: select? Does not work, :: style is not copied
• Style selected text using jQuery select bindings . This only works for inputs, not p, divs
• Intercept and remove style by binding event to copy / paste using jQuery? It is not possible to access the copied object to delete material by trying to use e.preventDefault (); then returns an event object, but that did not work.
• Change clipboard data after saving it? Also not cubes, most browsers will not allow you without this flush and confirmation of any kind.

Anyway, thoughts? This seems to be very useful for sites with a white background color.

Answer 1

I do not have time to copy the example now, but you can do this for cutting / copying caused by keyboard shortcuts. This will not work for cutting / copying through the context menu or the "Change" menu, because it depends on changing the user selection before cutting or copying occurs.

Stages:

• Handle the keyboard shortcuts Ctrl - C and Ctrl - X and Mac equivalents.
• In this handler, create an element off the screen (absolute position and left -10000 pixels, say) and copy the selected content into it. You can do this using window.getSelection().getRangeAt(0).cloneContents() , although you will need separate code for IE <9, and you should check that the selection has not fallen.
• Do whatever you want to change the style of the content of the item off-screen.
• Move the selection to cover the contents of the item off-screen so that the text is cut or copied.
• Add a short delay (a few milliseconds) using window.setTimeout() , which calls a function that removes the off-screen element and restores the original selection.

Answer 2

Do you need this to happen in the browser ... for each user?

If not - and it's just for you - then you can do it with Clipmate software.

http://www.clipmate.com/index.htm

It has a function that removes all styles.

Answer 3

After you called copy or cut, you can remove the html tags and only the text with some regular expression

 var String = Sample.replace(/(<([^>]+)>)/ig,""); 

Also, if you have saved text in a div with id "sample_div" Use var String=$('sample_div').text(''); to get only text inside

Answer 4

Given the current capabilities of the browser, you can intercept the copy event, get the selection without style and put it on the clipboard.

I tested this code with Chrome / Safari / Firefox. Believe me, this should work in MS browsers too.

 document.addEventListener('copy', function(e) { const text_only = document.getSelection().toString(); const clipdata = e.clipboardData || window.clipboardData; clipdata.setData('text/plain', text_only); clipdata.setData('text/html', text_only); e.preventDefault(); });