#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2014
    Posts
    5
    Rep Power
    0

    Simple Editor with two functions: convert text to html


    Hi,

    1) Convert to html link
    2) Insert paragraph tags

    Can some one tell me where my program is failing?
    In Firefox does not replace the paragraph tags and IE does not replace links

    Thank you so much ;(

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" language="JavaScript" ></script>
    javascript functions:

    Code:
    function go() {
    		$("#output").val(replaceURLWithHTMLLinks($("#input").val()));
    		return false;
    	}
    	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").keyup(function(event) {
    			go();
    		});
    		$('#input').bind('input propertychange', function() {
    			go();
    		});
    	});		
    	jQuery(function($) {  
      	var output = $("#output"),
        input = $("#input");  
      	input.on("keypress keyup", function() {
        output.html(input.val().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\r?\n/g, '<p>'));
      	});  
      	function display(msg) {
        $("<\p>").html(msg).appendTo(document.body);
      	}
    	});
    Submit form:

    Code:
    <form name="subform" onSubmit="return go();">
                    <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>                
                </form>
    Any help is greatly appreciated ;(
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,288
    Rep Power
    190
    Try something like this; it should do the trick:
    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>
    
    <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>

    Comments on this post

    • bautistajuan071 agrees
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2014
    Posts
    5
    Rep Power
    0
    Yes it does thank you very much
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2014
    Posts
    5
    Rep Power
    0
    Hello Web_Loone08, While understanding your code I find that it works great with a minor bug, it does create an extra set of paragraph tags.
    Do you know why? other than that thanks for all your help.
  8. #5
  9. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,288
    Rep Power
    190
    When this occurs, how does it come about? Seems to work, as expected; while testing via various browsers. It should insert the textual content (from within the first textarea) of each line within paragraph tags, (in the second textarea) for every line break/carriage return (that occurs within the first textarea).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2014
    Posts
    5
    Rep Power
    0
    Hi Web_loone08,

    Yes you are right the script it does work perfect, My fault, I did not explain myselft correctly.
    It did not come to my mind that the script can be in real time as typing and showing up right away.
    Also I am sorry that from my last reply I include a testing link and it did not get post it, so you did not see my reply.

    Anyhoo, I normally just have to copy and paste the text and that was what I was trying to do.
    When I do that some extra paragraphs tags gets added to the file. Below an example text for testing.

    "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"

    Thanks again
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,288
    Rep Power
    190
    More then likely..., what your experiencing is empty paragraph tags being inserted in place of the carriage returns (that do not contain text); which is what the code was written to accomplish. One way to prevent this from occurring; would be to prevent pasting into the textarea.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2014
    Posts
    5
    Rep Power
    0
    Web_Loone08,

    I really need to paste into the first textarea and reflect the changes in the second textarea without the extra p tags.

  16. #9
  17. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,288
    Rep Power
    190
    Then you would need to 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. You can make it work; you just will have to put a small amount of effort into accomplishing, what your wanting to do... it's not that hard, really.

IMN logo majestic logo threadwatch logo seochat tools logo