How to modify pasted data ? Jquery

Question

I followed this question JavaScript get clipboard data on paste event (Cross browser) to get the pasted data from the clipboard, but I used jquery instead. Now that I got the data, I removed all html tag. But I don't know how to paste it. element is a contenteditable div

element.on('paste', function (e) {
  var clipboardData, pastedData;
  e.preventDefault();
  // Get pasted data via clipboard API
  clipboardData = e.clipboardData || window.clipboardData || e.originalEvent.clipboardData;
  pastedData = clipboardData.getData('Text').replace(/<[^>]*>/g, "");
  // How to paste pasteddata now?
  console.log(pastedData);
});

@andrew: this will replace element's html. Imo, the user who pastes some text in the middle of existing text doesn't expect all pre-existing text to get lost. — fpierrat, Jun 04 '18 at 10:06

score 10 · Accepted Answer · answered Apr 16 '17 at 15:44

I found the answer and I am gonna share it. In order to sanitize the clipboard from html tags, you should paste this:

             element.on('paste', function (e) {
                    e.preventDefault();
                    var text;
                    var clp = (e.originalEvent || e).clipboardData;
                    if (clp === undefined || clp === null) {
                        text = window.clipboardData.getData("text") || "";
                        if (text !== "") {
                            text = text.replace(/<[^>]*>/g, "");
                            if (window.getSelection) {
                                var newNode = document.createElement("span");
                                newNode.innerHTML = text;
                                window.getSelection().getRangeAt(0).insertNode(newNode);
                            } else {
                                document.selection.createRange().pasteHTML(text);
                            }
                        }
                    } else {
                        text = clp.getData('text/plain') || "";
                        if (text !== "") {
                            text = text.replace(/<[^>]*>/g, "");
                            document.execCommand('insertText', false, text);
                        }
                    }
                });

Credit: l2aelba

for IE11 seems you have to use `document.execCommand("paste", false, text)` — Antoni4, Aug 26 '20 at 14:51
Thank you. That really helped me! Please leave link to l2aelba's original comment — Ramast, Aug 11 '21 at 14:01

score 4 · Answer 2 · answered Apr 16 '17 at 15:52

Might be easier to let the paste proceed and update element immediately after. Would depend on use case also as cursor position could be lost this way

$(':input').on('paste', function (e) {
    var $el = $(this); 
    setTimeout(function () {
        $el.val(function(){
            return this.value.replace(/foo/g, "bar"); 
        })
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>foo was here</p>
<textarea></textarea>

score -3 · Answer 3 · answered Apr 16 '17 at 15:25

-3

Well, it depends on what element are you going to paste in. You could use jQuery or native Javascript to achieve!

Maybe like $(targetNode).append(pastedData) or document.getElementById('targetNode').innerText = pastedData

answered Apr 16 '17 at 15:25

fung

641
6
14

paste can occur within existing content...this would wipe out other parts of that content or place pasted content at end where user isn't expecting it – charlietfl Apr 16 '17 at 15:31
@charlietfl have you got any other solution for not over writing existing content. – Joyner Jan 18 '19 at 06:18

How to modify pasted data ? Jquery

3 Answers3

Linked