add a break after every 4th character?

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"
nywebsolAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
NushiConnect With a Mentor Commented:
<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
 
NushiCommented:
Can even be done in nicer way using regExp.
0
 
Saqib KhanSenior DeveloperCommented:
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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
NushiCommented:
I dont see why u modified my soluton.
it wors pefectly.
 i see the cahnge - but why?

0
 
Saqib KhanSenior DeveloperCommented:
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
 
Saqib KhanSenior DeveloperCommented:
i tested yours Nushi, its Shows undefined onkeyup event.
0
 
NushiCommented:
tested on IE and mozilla.
workded for me.

Wors fine even if teh text field is empty.

Nushi.
0
 
Saqib KhanSenior DeveloperCommented:
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
 
NushiCommented:
see it now. you right.
0
 
NushiCommented:
needs to be charAt[]
and 0 check
0
 
NushiCommented:
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
 
Saqib KhanSenior DeveloperCommented:
yea, your solution with do it with charAt. with mine i just modified yours into and array and with a 0 Check:)
0
 
NushiCommented:
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
 
ZvonkoSystems architectCommented:
Check this:



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



0
 
NushiCommented:
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
 
ZvonkoSystems architectCommented:
Sorry, I did look only at your loopings and thought: what they are doing! :)
0
 
NushiCommented:
see the second comment :-))
0
 
NushiCommented:
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
 
Saqib KhanSenior DeveloperCommented:
You right Nushi, my RegExp is weak as well. please explain wut $1 means.

Thanks
0
 
NushiCommented:
$1 means the first token u find
the \w = word
{4} = 4 occurences of any part of word

Nushi.
0
 
NushiCommented:
forgot the 'g'
g=global search (seacrh in all the string)

Nushi.
0
 
ZvonkoSystems architectCommented:
I see.
I learned yesterday a new word: tsabar. Are you tsabar?  :)
0
 
NushiCommented:
yep.

Where di you hear it from :-)

Nushi.
0
 
Saqib KhanSenior DeveloperCommented:
so "4" first occurance of any 4 words is the Token #1, next 4 Token #2?

Thanks for explaination.
0
 
ZvonkoSystems architectCommented:
From my teacher: Gila :)
She cannot pronounce my name and called me: Zeew!
0
 
ZvonkoSystems architectCommented:
0
 
NushiCommented:
:-))

Where do you learn hebrew Z?
0
 
ZvonkoSystems architectCommented:
In Munich.
But I am Makedonian. I learn Iwrit only to read Tanach.
0
 
NushiCommented:
:-))
cool, and gl
(ggod luck).
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.