Solved

add a break after every 4th character?

Posted on 2006-07-07
32
343 Views
Last Modified: 2008-02-01
I have a long string.. I would like to write out this string with a break after every 4th character or so.
Example:
"123456789123456789"

it would need to be displayed:
"1234"
"5678"
"9123"
"4567"
"89"
0
Comment
Question by:nywebsol
  • 16
  • 7
  • 6
32 Comments
 
LVL 10

Accepted Solution

by:
Nushi earned 250 total points
ID: 17060706
<html>

<script>
var SIZE = 4;
var SPACE ="<br>";

function addSpaces( obj ){
      var reply="";
      for (ind=0; ind<obj.value.length; ind++){
            reply += obj.value[ ind];
            if ( (ind % SIZE) == 0){
                  reply += SPACE;
                  }
            }
      document.getElementById('output').innerHTML=reply;
}

</script>

<input type="text" value="12341234123412341234" onkeyup="addSpaces(this)">
<br>
<br>
<span id="output">
      Change the text in the box to see output
</span>
<br>
</html>

Nushi.
0
 
LVL 10

Expert Comment

by:Nushi
ID: 17060710
Can even be done in nicer way using regExp.
0
 
LVL 23

Expert Comment

by:Saqib Khan
ID: 17060891
I believe it should be..

<html>

<script>
var SIZE = 4;
var SPACE ="<br>";

function addSpaces( obj ){
     var reply="";
      obj1 = obj.value.split("")
     for (ind=0; ind<obj1.length; ind++){
          reply += obj1[ind];
          if ( (ind % SIZE) == 0){
               reply += SPACE;
               }
          }
     document.getElementById('output').innerHTML=reply;
}

</script>

<input type="text" value="12341234123412341234" onkeyup="addSpaces(this)">
<br>
<br>
<span id="output">
     Change the text in the box to see output
</span>
<br>
</html>
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 10

Expert Comment

by:Nushi
ID: 17060915
I dont see why u modified my soluton.
it wors pefectly.
 i see the cahnge - but why?

0
 
LVL 23

Expert Comment

by:Saqib Khan
ID: 17060923
Better Yet use this..

<html>

<script>
var SIZE = 4;
var SPACE ="<br>";

function addSpaces( obj ){
     var reply="";
      obj1 = obj.value.split("")
     for (ind=0; ind<obj1.length; ind++){

          if ( ind % SIZE == 0 && ind>0){
               reply += SPACE;
               }
                      reply += obj1[ind];
          }
     document.getElementById('output').innerHTML=reply;
}

</script>

<input type="text" value="12341234123412341234" onkeyup="addSpaces(this)">
<br>
<br>
<span id="output">
     Change the text in the box to see output
</span>
<br>
</html>
0
 
LVL 23

Expert Comment

by:Saqib Khan
ID: 17060931
i tested yours Nushi, its Shows undefined onkeyup event.
0
 
LVL 10

Expert Comment

by:Nushi
ID: 17060965
tested on IE and mozilla.
workded for me.

Wors fine even if teh text field is empty.

Nushi.
0
 
LVL 23

Expert Comment

by:Saqib Khan
ID: 17060994
onkeyup i am getting the following output..

undefined
undefinedundefinedundefinedundefined
undefinedundefinedundefinedundefined
undefinedundefinedundefinedundefined
undefined


you not converting textbox value into array, maybe thats why my browser is bugging.
I am on IE 6.0
0
 
LVL 10

Expert Comment

by:Nushi
ID: 17061015
see it now. you right.
0
 
LVL 10

Expert Comment

by:Nushi
ID: 17061022
needs to be charAt[]
and 0 check
0
 
LVL 10

Expert Comment

by:Nushi
ID: 17061051
The fixed one is:

<script>
var SIZE = 4;
var SPACE ="<br>";

function addSpaces( obj ){
     var reply="";
     for (ind=0; ind<obj.value.length; ind++){
          if ( ind>0 && (ind % SIZE) == 0){
               reply += SPACE;
               }
          reply += obj.value.charAt(ind);
          }
     document.getElementById('output').innerHTML=reply;
}

</script>

<input type="text" value="12341234123412341234" onkeyup="addSpaces(this)">
<br>
<br>
<span id="output">
     Change the text in the box to see output
</span>
<br>
</html>



Nushi.
0
 
LVL 23

Expert Comment

by:Saqib Khan
ID: 17061074
yea, your solution with do it with charAt. with mine i just modified yours into and array and with a 0 Check:)
0
 
LVL 10

Expert Comment

by:Nushi
ID: 17061103
i tested in firefox -> and with IE view.
For some reason it did not switch to IE.
When i open in IE saw the 'undefined'
Nushi.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17061419
Check this:



      document.write("123456789123456789".replace(/(\w{4})/g,"$1<br>"));



0
 
LVL 10

Expert Comment

by:Nushi
ID: 17061484
That what i suggested. to use regExp- one line of code as i commented above :-)

So the combined answer will be (with thanks to Zvonko):

<html>

<input type="text" value="12341234123412341234" onkeyup="document.getElementById('output').innerHTML=this.value.replace(/(\w{4})/g,'$1<br>')">
<br>
<span id="output">
     Change the text in the box to see output
</span>
</html>

Nushi.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17061518
Sorry, I did look only at your loopings and thought: what they are doing! :)
0
 
LVL 10

Expert Comment

by:Nushi
ID: 17061527
see the second comment :-))
0
 
LVL 10

Expert Comment

by:Nushi
ID: 17061534
Since most people are not good with RegExp i prefer to write full function for them
In this way its easier to modify it later if the need to do so something else.

Nushi.
0
 
LVL 23

Expert Comment

by:Saqib Khan
ID: 17061593
You right Nushi, my RegExp is weak as well. please explain wut $1 means.

Thanks
0
 
LVL 10

Expert Comment

by:Nushi
ID: 17061603
$1 means the first token u find
the \w = word
{4} = 4 occurences of any part of word

Nushi.
0
 
LVL 10

Expert Comment

by:Nushi
ID: 17061610
forgot the 'g'
g=global search (seacrh in all the string)

Nushi.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17061611
I see.
I learned yesterday a new word: tsabar. Are you tsabar?  :)
0
 
LVL 10

Expert Comment

by:Nushi
ID: 17061619
yep.

Where di you hear it from :-)

Nushi.
0
 
LVL 23

Expert Comment

by:Saqib Khan
ID: 17061636
so "4" first occurance of any 4 words is the Token #1, next 4 Token #2?

Thanks for explaination.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17061641
From my teacher: Gila :)
She cannot pronounce my name and called me: Zeew!
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17061679
0
 
LVL 10

Expert Comment

by:Nushi
ID: 17061746
:-))

Where do you learn hebrew Z?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17061850
In Munich.
But I am Makedonian. I learn Iwrit only to read Tanach.
0
 
LVL 10

Expert Comment

by:Nushi
ID: 17061886
:-))
cool, and gl
(ggod luck).
0

Featured Post

Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
https://github.com/willowsystems/jSignature 11 52
Using javascript confirmation for a delete in mysql 5 34
javascript: add id amounts 5 47
alert(innerHTML); 8 19
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question