content-change
Version:
Observe and react to changes in distributed nodes in web components, Shadow DOM v0.
46 lines (36 loc) • 1.21 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div>Copy paste the following into the text area:</div>
<div><a href="testing.html">Testing Link</a></div>
<textarea></textarea>
<script>
function fragmentFromString(strHTML) {
return document.createRange().createContextualFragment(strHTML);
}
function getInnerHtmlFromFragment(fragment) {
let script = document.createElement('div');
//script.setAttribute('type', 'template');
script.appendChild(fragment);
return script.innerHTML;
}
$('textarea').on('paste', function (e) {
e.preventDefault();
let text = (e.originalEvent || e).clipboardData.getData('Text') || prompt('Paste something..');
let fragment = fragmentFromString(text);
let aTags = Array.from(fragment.querySelectorAll('a'));
aTags.forEach(a => {
let textNode = document.createTextNode("[url=" + a.href + "]" + a.textContent + "[/url]");
fragment.replaceChild(textNode, a);
});
let finalText = getInnerHtmlFromFragment(fragment);
console.log(finalText);
});
</script>
</body>
</html>