0 Replies - 1093 Views - Last Post: 24 September 2010 - 10:40 PM

#1 sl4ck3r  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 11
  • View blog
  • Posts: 285
  • Joined: 22-September 07

[jQuery] Stripping Tags On Paste using jQuery

Posted 24 September 2010 - 10:40 PM

Description: Recently, I came across a problem with copy and pasting from a web browser. Clients were copy pasting stuff from one web page into a textarea in my app. The browser was pasting the tags that formatted the information as well. This was a problem because it was hampering the users ability to edit the information with our own html controls on the textarea. The solution: strip tags from all pasted information. I implemented a simple yet useful script using Javascript, jQuery, and the fieldSelection jQuery plugin to accomplish this. Feel free to use this code how you see fit and it would be wonderful if you left the tribute to me in the code. The code is comment well enough it should explain itself. If you have any questions feel free to post them in the comments. Limitation: When you paste over selected text it doesn’t work properly. You need the fieldSelection plugin to make this work properly. All linebreaks are removed by default, but you can leave them by one of the options. Reminder: You still NEED to deal with tags on the server side (remove them, html encode them, etc). Javascript can be turned off / bypassed. Here is the code:This script strips all tags on paste using jQuery for a specific textarea / input. http://blog.brokenby...e-using-jquery/
        /* 
        * Author: Matt Seigel
        * Name: Strip Tags 
        * Version: v2.0.340
        * Relase Date: 9/24/2010
        * Contact: http://brokenbytes.info
        */
        $(document).ready(function () {
            // ***** START OPTIONS ***** //
            // Name of target textarea / input box
            var target = "#txtArea";
            // Boolean indicating wether to remove linebreaks or not
            var removeLinebreaks = true;
            // ****** END OPTIONS ****** //

            // Bind to the thing you want to check for pastes
            $(target).bind('paste', function (e) {
                // Calling Object
                var callingObject = $(this);
                // Get the original text in the target
                var originalText = $(this).val();
                // Get cursor information
                var cursorInfo = $(target).getSelection();
                // Set a very short timeout and set its callback to the function 
                // stripping tags, the short timeout allows for the pasted text to be accessable
                setTimeout(function () { stripTags(callingObject, originalText, cursorInfo, removeLinebreaks) }, 1);
            });
        });
        /* 
        * callingObject:       Calling object.
        * originalText:        The text inside the textarea before the paste.
        * cursorInfo:          Gets the information about the cursor. (location, etc)
        * removeLinebreaks:    true to remove linebreaks, false to ignore linebreaks
        */
        function stripTags(callingObject, originalText, cursorInfo, removeLinebreaks) {
            // Get the front part of the original text (part before the new text)
            var front = originalText.substring(0, cursorInfo.start);
            // Get the back part of the original text (part after the new text)
            var back = originalText.substring(cursorInfo.end);
            // Get the pasted text out of the new text
            var pasted = callingObject.val().replace(front, "").replace(back, "");
            // Remove tags from the pasted stuff
            pasted = pasted.replace(/(<[^<>]*>)/g, "");
            // Remove newline characters, if we want to.
            if (removeLinebreaks) {
                pasted = pasted.replace(/n/g, "");
            }
            // Put the new text into the target
            $(callingObject).text(front + pasted + back);
        }


Is This A Good Question/Topic? 0
  • +

Page 1 of 1