www.webdeveloper.com
Results 1 to 6 of 6

Thread: Wrap lines after x number of characters in a textarea but NOT in the middle of a word

  1. #1
    Join Date
    Oct 2008
    Posts
    7

    Wrap lines after x number of characters in a textarea but NOT in the middle of a word

    Hey guys,

    A little bit of explanation:

    I have a textarea with a specific width. I have wrap="off" set because I don't want to force my users to wrap if they don't want to. The reason for this is because this textarea is where the user is typing an email message. However I have a background image set on the textarea with a verticle line going down the textarea which indicates to the user the "Recommend Width"

    What I want to do is provide them with a link to click on which says something like "Wrap Lines" and when they click on it, the text within the textarea would wrap to the "Recommended Width" line in the background image. The maximum length of a line should be 53 characters when they click on "Wrap Lines" link.

    So I did some searching around and the code I came up with is:

    Code:
    function showLines(max, text) {
    max--;
    text = "" + text;
    var temp = "";
    var chcount = 0; 
    for (var i = 0; i < text.length; i++) // for each character ... 
    {   
    var ch = text.substring(i, i+1); // first character
    var ch2 = text.substring(i+1, i+2); // next character
    if (ch == '\n') // if character is a hard return
    {  
    temp += ch;
    chcount = 1;
    }
    else
    {
    if (chcount == max) // line has max chacters on this line
    {
    temp += '\n' + ch; // go to next line
    chcount = 1; // reset chcount
    }
    else  // Not a newline or max characters ...
    {
    temp += ch;
    chcount++; // so add 1 to chcount
          }
       }
    }
    return (temp); // sends value of temp back
    }
    Which is activated by using a HTML submit form button

    Code:
    <input type=button value="Wrap Lines to 53 Spaces"
    onClick="this.form.text1.value = showLines(53, this.form.text1.value)">
    The problem with this code is that when it gets to the 53 character on the line it does the word wrap, even if its in the middle of the word.

    So a sentence like:

    This sentence is going to wrap in the middle of a wor
    d

    Can anyone help me in figuring out how to prevent this from happening and wrap the entire word instead of just doing it in the middle of a word?

    Thanks

    Chad

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    This mightn't be perfect, it needs testing, but regular expressions are definitely the way to go.
    Code:
    var temp = /* textarea value */;
    temp = temp.replace(/^(.{53}\w+)/mg,"$1\n");
    Or since you want to pass a variable as the max-length, you can do that too.
    Code:
    el.value = el.value.replace(new Regexp("^(.{"+max+"}\w+","mg"),"$1\n");
    Great wit and madness are near allied, and fine a line their bounds divide.

  3. #3
    Join Date
    Oct 2008
    Posts
    7
    Hmmm...I can't see to get that to work properly. Where should I interject that code you suggested? Sorry, I am not a javascript programmer.


    Code:
    <head>
    <title>Textarea Test</title>
    <script type="text/javascript">
    
    <!-- Begin
    function showLines(max, text) {
    	max--;
    	text = "" + text;
    	var temp = "";
    	temp = temp.replace(/^(.{53}\w+)/mg,"$1\n");
    	var chcount = 0; 
    	for (var i = 0; i < text.length; i++) // for each character ... 
    	{
    		var ch = text.substring(i, i+1); // first character
    		var ch2 = text.substring(i+1, i+2); // next character
    		if (ch == '\n') // if character is a hard return
    		{
    			temp += ch;
    			chcount = 1;
    		}
    		else
    		{
    			if (chcount == max) // line has max chacters on this line
    			{
    				temp += '\n' + ch; // go to next line
    				chcount = 1; // reset chcount
    			}
    			else  // Not a newline or max characters ...
    			{
    				temp += ch;
    				chcount++; // so add 1 to chcount
    			}
    		}
    	}
    return (temp); // sends value of temp back
    }
    //  End -->
    </script>
    </head>
    
    <body>
    
    <p align="center">
    <form name=form1>
    <textarea name=text1 rows=15 cols=80>This is just an example of a long textbox entry that just went on and on and on and on.....  The visitor did not hit <enter> when entering this information so it continued off the right side of the textarea box.  Notice that hitting <enter> after each line, like this:
    This is on another line
    And so is this one.....
    
    Still wraps correctly.  Neat!</textarea><br>
    <input type=button value="Wrap Lines to 53 Spaces"
    onClick="this.form.text1.value = showLines(53, this.form.text1.value)">
    
    
    </form>
    </p>
    
    </body>
    </html>
    Last edited by cytech; 07-14-2010 at 11:03 AM.

  4. #4
    Join Date
    Aug 2007
    Posts
    3,767
    It replaces the whole thing.
    Code:
    function showLines(max, text) {
    	return text.replace(new RegExp("/^(.{"+max+"}\\w+)","mg"),"$1\n");
    }
    I cannot recommend learning how to use regular expressions highly enough.

    As I say, it may have to be tweaked, so be sure to say so if you need help doing so.
    Last edited by Declan1991; 07-14-2010 at 12:57 PM.
    Great wit and madness are near allied, and fine a line their bounds divide.

  5. #5
    Join Date
    Oct 2008
    Posts
    7
    Well I did as you said and replaced the whole thing.

    It now looks like:

    Code:
    <head>
    <title>Textarea Test</title>
    <script type="text/javascript">
    
    <!-- Begin
    function showLines(max, text) {
    	return text.replace(new RegExp("/^(.{"+max+"}\w+)","mg"),"$1\n");
    }
    //  End -->
    </script>
    </head>
    
    <body>
    
    <p align="center">
    <form name=form1>
    <textarea name="text1" rows="15" cols="80">This is just an example of a long textbox entry that just went on and on and on and on.....  The visitor did not hit <enter> when entering this information so it continued off the right side of the textarea box.  Notice that hitting <enter> after each line, like this:
    This is on another line
    And so is this one.....
    
    Still wraps correctly.  Neat!</textarea><br>
    <input type=button value="Wrap Lines to 53 Spaces"
    onClick="this.form.text1.value = showLines(53, this.form.text1.value)">
    
    
    </form>
    </p>
    
    </body>
    </html>
    However now it doesn't do anything at all when you click the button. I am reading about expressions now, but would appreciate any assistance.

  6. #6
    Join Date
    Aug 2007
    Posts
    3,767
    I had a typo. As it happens, I improved it while I was at it, so here is the finished script.
    Code:
    function showLines(max, text) {
    	var reg = new RegExp("^(.{"+max+"}[^\\s]+\\s)","mg");
    	var treg = new RegExp("^.{"+max+"}[^\\s]+\\s.+$","mg");
    	var temp = text.replace(reg,"$1\n");
    	var arr, finished;
    	do {
    		finished = true;
    		arr = temp.split("\n");
    		for (var i = 0; i < arr.length; i++) {
    			if(treg.test(arr[i])) {
    				arr[i] = arr[i].replace(reg,"$1\n");
    				finished = false;
    			}		
    		}
    		temp = arr.join("\n");
    	}
    	while (!finished);
    	return temp;
    }
    I can't come up with a better solution, but it works.
    Great wit and madness are near allied, and fine a line their bounds divide.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles