Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
Like Tree1Likes
  • 1 Post By 007julien

Thread: Deleting extra ‘p’ tags from textarea form field

  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Deleting extra ‘p’ tags from textarea form field

    Hello everyone,
    How can I check the length of each carriage return (from the first textarea) and if the length of the carriage return is equal to zero; then insert/wrap the text on the carriage return with a paragraph tag..., otherwise don't.
    Example input copy and paste test:

    “"Mauris adipiscing lacus sit amet libero dapibus lobortis

    Phasellus iaculis iaculis urna ut ullamcorper. Nullam hendrerit lectus non orci volutpat id pulvinar mi dictum.

    Pellentesque felis quam, posuere in faucibus at, pharetra et quam. Pellentesque habitant morbi tristique senectus et"”
    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
    	var breaks = [];
    	function replaceURLWithHTMLLinks(text) {
    		var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
    		return text.replace(exp,'<a href="$1">$1</a>'); 
    	}	
    	$(document).ready(function(){
             $("#input").bind("keypress keyup", function() {
              breaks = $("#input").val().split("\n");
               $("#storage").html("");
               $.each(breaks,function(e){
                  $("#storage").append("<p>" + breaks[e] + "</p>\n");
               });
                  $("#output").val(replaceURLWithHTMLLinks($("#storage").html().replace(/[\n]$/,"")));
              });
    	});
    </script>
    The html part:
    Code:
    <form name="subform">
        <textarea id="input" name="oldText" cols="120" rows="30" wrap="virtual"></textarea>
        <br /><br />
        <textarea id="output" name="newCode" cols="120" rows="30" wrap="virtual"></textarea>                
    	<div id="storage" style="display:none"></div>
    </form>
    Thank you in advance ;(

  • #2
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    I am not sure to understand your question...
    New lines are made of carriage return and Line Feed.
    Then you can test its with something like this
    Code:
    	var txt=document.getElementById('input').value;
    	if(/\r?\n/.test(txt)) alert("New line")
    	else alert("No new lines")
    EDIT : To remove empty paragraphs add only an if (breaks[e]) like this
    Code:
    $(document).ready(function(){
             $("#input").bind("keypress keyup", function() {
              breaks = $("#input").val().split("\n");
               $("#storage").html("");
               $.each(breaks,function(e){
                  if (breaks[e]) $("#storage").append("<p>" + breaks[e] + "</p>\n");
               });
                  $("#output").val(replaceURLWithHTMLLinks($("#storage").html().replace(/[\n]$/,"")));
              });
    	});
    But to define breaks a split(/\r?\n/g) would be better to works with UNIX or DOS text files
    Last edited by 007julien; 03-26-2014 at 10:14 PM.
    bautistajuan071 likes this.

  • #3
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Woohoo!! it does work. Thank you 007julien!!!

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Optimized version:
    Code:
    $(document).ready(function(){
    	var $storage = $('#storage'),
    		$output = $("#output");
    
    	$("#input").bind("keypress keyup", function() {
    		var breaks = this.value.split("\n"),
    			p = '';
    		
    		$.each(breaks,function(e){
    			if (breaks[e]) {
    				p += "<p>" + breaks[e] + "</p>\n";
    			}
    		});
    		$storage.html(p);
    		$output.val(replaceURLWithHTMLLinks($storage.html().replace(/[\n]$/,"")));
    	});
    });
    Since you execute that function on every keystroke, it would be more efficient if you cache the jquery references to local variables and to set the storage html in one swoop rather than appending on every loop iteration.

    But there is one missing on that function -- if user right clicks and pastes the text, the handler will not be executed. You should use 'input' event which covers inputting via keyboard and mouse and supported by IE9+ and the rest of modern browsers.

    Code:
    $(document).ready(function(){
    	var $storage = $('#storage'),
    		$output = $("#output"),
    		replaceNewLines = function(e) {
    			var breaks = this.value.split("\n"),
    				p = '';
    		
    			$.each(breaks,function(e){
    				if (breaks[e]) {
    					p += "<p>" + breaks[e] + "</p>\n";
    				}
    			});
    			$storage.html(p);
    			$output.val(replaceURLWithHTMLLinks($storage.html().replace(/[\n]$/,"")));
    		};
    
        $("#input")
        	.on("input", function(e) {
        		$(this).off('.newlines');  //keypress and keyup handlers are still executed so remove them
        		replaceNewLines.call(this, e);
        	})
        	.on("keypress.newlines keyup.newlines", replaceNewLines);
    });
    Even using 'input' event, the keypress and keyup will still be executed causing the replaceNewLines() to be called twice on every keystroke or mouse operation. Removing the keypress and keyup handlers inside 'input' will make it so the replaceNewLines() will only be called twice on the first keystroke or mouse operation and will not be called on the succeeding ones.

    If you want to support cut and paste in IE8 and below using mouse, you can add the them like this:
    Code:
    $("#input")
        	.on("input", function(e) {
        		$(this).off('.newlines');  //keypress, keyup, cut and paste events are still executed so remove them
        		replaceNewLines.call(this, e);
        	})
        	.on("keypress.newlines keyup.newlines", replaceNewLines)
        	.on("paste.newlines cut.newlines", function(e) {
        	    	var that = this;
        	    	setTimeout(function() {
        	    	    	replaceNewLines.call(that, e);
        	    	}, 10);
        	});
    cut and paste events are actually supported in other browsers too but for those that also support 'input', cut and paste events are already covered. So we also need to remove them inside 'input'.

  • #5
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    An other variant would be to work with all new lines (\r\n with DOS and window, \n with UNIX and \r with MAC).
    Then it'is enough to split with a regular expression like /[\r\n]+/g without the if (breaks[e]) now useless.
    Code:
    	$(document).ready(function(){
             $("#input").bind("keypress keyup", function() {
              breaks = $("#input").val().split(/[\r\n]+/g);
               $("#storage").html("");
               $.each(breaks,function(e){
    			  $("#storage").append("<p>" + breaks[e] + "</p>\n");
               });
                  $("#output").val(replaceURLWithHTMLLinks($("#storage").html().replace(/[\n]$/,"")));
              });
    	})
    Last edited by 007julien; 03-28-2014 at 05:21 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •