Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 353
  • Last Modified:

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"
0
nywebsol
Asked:
nywebsol
  • 16
  • 7
  • 6
1 Solution
 
NushiCommented:
<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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 16
  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now