JSFiddle - React, Tailwind, and code Playground

by mitya33

HTML

<p>Step 1: Copy the below HTML to your clipboard</p>
<pre>&lt;a href='https://mozilla.org' onclick='alert("Hello!")' style='color:red'&gt;This is my link&lt;/a&gt;</pre>
<p>Step 2: Paste it into the textarea somewhere (see how the @style and <code>onclick</code> attributes are removed.)</p>
<textarea></textarea>

CSS

p { font-family: 'trebuchet ms', sans; }
pre { background: #fed; padding: 1rem; color: #d55; white-space: pre-wrap; }
textarea { width: 500px; max-width: 100%; height: 10rem; }
code { font-family: consolas, courier new; color: #d55; }

JavaScript

let el = document.querySelector('textarea');
el.addEventListener('paste', evt => {
    evt.preventDefault();
	let data = event.clipboardData.getData('text/plain');
	let div = document.createElement('div');
	div.innerHTML = data;
	[...div.children].forEach(el =>
		[...el.attributes].forEach(attr => {
			if (/^(style|data-|on)/.test(attr.name))
				el.removeAttribute(attr.name)
		})
	);
	let [start, end] = [el.selectionStart, el.selectionEnd];
	el.setRangeText(div.innerHTML, start, end);
});