Print user input but add a new format or characters between the numbers ?












1














I want to input numbers and print them like in the example bellow.



Input: 0000000000
Print with format: *0*0*0*0*0*0*0*0*0*0*



I cant seem to figure it out with what i have read about formats in html.
If I can use something like: $(this).formatCurrency({ symbol: '*',
to add in * between the numbers.



Would really appreciate any help or tips!



What i have so far is this



enter code here
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
}


</script>

</head>
<body>

<form>
<label><b>Enter a Message</b></label>
<input type="text" name="message" id="user_input">
</form>

<input type="submit" onclick="showInput();"><br/>
<label>Your input: </label>
<p>*<span id='display'></span>*</p>
</body>
</html>









share|improve this question



























    1














    I want to input numbers and print them like in the example bellow.



    Input: 0000000000
    Print with format: *0*0*0*0*0*0*0*0*0*0*



    I cant seem to figure it out with what i have read about formats in html.
    If I can use something like: $(this).formatCurrency({ symbol: '*',
    to add in * between the numbers.



    Would really appreciate any help or tips!



    What i have so far is this



    enter code here
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <script language="JavaScript">
    function showInput() {
    document.getElementById('display').innerHTML =
    document.getElementById("user_input").value;
    }


    </script>

    </head>
    <body>

    <form>
    <label><b>Enter a Message</b></label>
    <input type="text" name="message" id="user_input">
    </form>

    <input type="submit" onclick="showInput();"><br/>
    <label>Your input: </label>
    <p>*<span id='display'></span>*</p>
    </body>
    </html>









    share|improve this question

























      1












      1








      1







      I want to input numbers and print them like in the example bellow.



      Input: 0000000000
      Print with format: *0*0*0*0*0*0*0*0*0*0*



      I cant seem to figure it out with what i have read about formats in html.
      If I can use something like: $(this).formatCurrency({ symbol: '*',
      to add in * between the numbers.



      Would really appreciate any help or tips!



      What i have so far is this



      enter code here
      <!DOCTYPE html>
      <html>
      <head lang="en">
      <meta charset="UTF-8">
      <script language="JavaScript">
      function showInput() {
      document.getElementById('display').innerHTML =
      document.getElementById("user_input").value;
      }


      </script>

      </head>
      <body>

      <form>
      <label><b>Enter a Message</b></label>
      <input type="text" name="message" id="user_input">
      </form>

      <input type="submit" onclick="showInput();"><br/>
      <label>Your input: </label>
      <p>*<span id='display'></span>*</p>
      </body>
      </html>









      share|improve this question













      I want to input numbers and print them like in the example bellow.



      Input: 0000000000
      Print with format: *0*0*0*0*0*0*0*0*0*0*



      I cant seem to figure it out with what i have read about formats in html.
      If I can use something like: $(this).formatCurrency({ symbol: '*',
      to add in * between the numbers.



      Would really appreciate any help or tips!



      What i have so far is this



      enter code here
      <!DOCTYPE html>
      <html>
      <head lang="en">
      <meta charset="UTF-8">
      <script language="JavaScript">
      function showInput() {
      document.getElementById('display').innerHTML =
      document.getElementById("user_input").value;
      }


      </script>

      </head>
      <body>

      <form>
      <label><b>Enter a Message</b></label>
      <input type="text" name="message" id="user_input">
      </form>

      <input type="submit" onclick="showInput();"><br/>
      <label>Your input: </label>
      <p>*<span id='display'></span>*</p>
      </body>
      </html>






      html input printing






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 23 '18 at 6:49









      SimonSimon

      62




      62
























          3 Answers
          3






          active

          oldest

          votes


















          0














          You can use concat like below:






          function showInput() 
          {

          var inp=document.getElementById("user_input").value;
          var hello='*';

          for (var i = 0; i < inp.length; i++) {
          hello+=inp[i].concat('*');
          }

          document.getElementById('display').innerHTML = hello;
          }

          <!DOCTYPE html>
          <html>
          <head lang="en">
          <meta charset="UTF-8">

          </head>
          <body>

          <form>
          <label><b>Enter a Message</b></label>
          <input type="text" name="message" id="user_input">
          </form>

          <input type="submit" onclick="showInput();"><br/>
          <label>Your input: </label>
          <p><span id='display'></span></p>
          </body>
          </html>








          share|improve this answer





























            0














            You can loop through all of the numbers and insert a "*" at desired position with substr






            var input = '000000000000000000000';
            var newNumbers = input;

            for (var i = 1; i < input.length * 2 - 1; i = i + 2) {

            newNumbers = newNumbers.substr(0, i) + "*" + newNumbers.substr(i);
            }
            alert(newNumbers);








            share|improve this answer





























              0














              You could use split('') to divide your input into single characters and join('*') to insert a * after each character:






                     function showInput() {
              document.getElementById('display').innerHTML =
              document.getElementById("user_input").value.match(/.{1}/g).join('*');
              }

              <!DOCTYPE html>
              <html>
              <head lang="en">
              <meta charset="UTF-8">
              </head>
              <body>

              <form>
              <label><b>Enter a Message</b></label>
              <input type="text" name="message" id="user_input">
              </form>

              <input type="submit" onclick="showInput();"><br/>
              <label>Your input: </label>
              <p>*<span id='display'></span>*</p>
              </body>
              </html>





              Or you use regex to get the same result:



              function showInput() {
              document.getElementById('display').innerHTML =
              document.getElementById("user_input").value.match(/.{1}/g).join('*');
              }





              share|improve this answer





















                Your Answer






                StackExchange.ifUsing("editor", function () {
                StackExchange.using("externalEditor", function () {
                StackExchange.using("snippets", function () {
                StackExchange.snippets.init();
                });
                });
                }, "code-snippets");

                StackExchange.ready(function() {
                var channelOptions = {
                tags: "".split(" "),
                id: "1"
                };
                initTagRenderer("".split(" "), "".split(" "), channelOptions);

                StackExchange.using("externalEditor", function() {
                // Have to fire editor after snippets, if snippets enabled
                if (StackExchange.settings.snippets.snippetsEnabled) {
                StackExchange.using("snippets", function() {
                createEditor();
                });
                }
                else {
                createEditor();
                }
                });

                function createEditor() {
                StackExchange.prepareEditor({
                heartbeatType: 'answer',
                autoActivateHeartbeat: false,
                convertImagesToLinks: true,
                noModals: true,
                showLowRepImageUploadWarning: true,
                reputationToPostImages: 10,
                bindNavPrevention: true,
                postfix: "",
                imageUploader: {
                brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
                contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
                allowUrls: true
                },
                onDemand: true,
                discardSelector: ".discard-answer"
                ,immediatelyShowMarkdownHelp:true
                });


                }
                });














                draft saved

                draft discarded


















                StackExchange.ready(
                function () {
                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441865%2fprint-user-input-but-add-a-new-format-or-characters-between-the-numbers%23new-answer', 'question_page');
                }
                );

                Post as a guest















                Required, but never shown

























                3 Answers
                3






                active

                oldest

                votes








                3 Answers
                3






                active

                oldest

                votes









                active

                oldest

                votes






                active

                oldest

                votes









                0














                You can use concat like below:






                function showInput() 
                {

                var inp=document.getElementById("user_input").value;
                var hello='*';

                for (var i = 0; i < inp.length; i++) {
                hello+=inp[i].concat('*');
                }

                document.getElementById('display').innerHTML = hello;
                }

                <!DOCTYPE html>
                <html>
                <head lang="en">
                <meta charset="UTF-8">

                </head>
                <body>

                <form>
                <label><b>Enter a Message</b></label>
                <input type="text" name="message" id="user_input">
                </form>

                <input type="submit" onclick="showInput();"><br/>
                <label>Your input: </label>
                <p><span id='display'></span></p>
                </body>
                </html>








                share|improve this answer


























                  0














                  You can use concat like below:






                  function showInput() 
                  {

                  var inp=document.getElementById("user_input").value;
                  var hello='*';

                  for (var i = 0; i < inp.length; i++) {
                  hello+=inp[i].concat('*');
                  }

                  document.getElementById('display').innerHTML = hello;
                  }

                  <!DOCTYPE html>
                  <html>
                  <head lang="en">
                  <meta charset="UTF-8">

                  </head>
                  <body>

                  <form>
                  <label><b>Enter a Message</b></label>
                  <input type="text" name="message" id="user_input">
                  </form>

                  <input type="submit" onclick="showInput();"><br/>
                  <label>Your input: </label>
                  <p><span id='display'></span></p>
                  </body>
                  </html>








                  share|improve this answer
























                    0












                    0








                    0






                    You can use concat like below:






                    function showInput() 
                    {

                    var inp=document.getElementById("user_input").value;
                    var hello='*';

                    for (var i = 0; i < inp.length; i++) {
                    hello+=inp[i].concat('*');
                    }

                    document.getElementById('display').innerHTML = hello;
                    }

                    <!DOCTYPE html>
                    <html>
                    <head lang="en">
                    <meta charset="UTF-8">

                    </head>
                    <body>

                    <form>
                    <label><b>Enter a Message</b></label>
                    <input type="text" name="message" id="user_input">
                    </form>

                    <input type="submit" onclick="showInput();"><br/>
                    <label>Your input: </label>
                    <p><span id='display'></span></p>
                    </body>
                    </html>








                    share|improve this answer












                    You can use concat like below:






                    function showInput() 
                    {

                    var inp=document.getElementById("user_input").value;
                    var hello='*';

                    for (var i = 0; i < inp.length; i++) {
                    hello+=inp[i].concat('*');
                    }

                    document.getElementById('display').innerHTML = hello;
                    }

                    <!DOCTYPE html>
                    <html>
                    <head lang="en">
                    <meta charset="UTF-8">

                    </head>
                    <body>

                    <form>
                    <label><b>Enter a Message</b></label>
                    <input type="text" name="message" id="user_input">
                    </form>

                    <input type="submit" onclick="showInput();"><br/>
                    <label>Your input: </label>
                    <p><span id='display'></span></p>
                    </body>
                    </html>








                    function showInput() 
                    {

                    var inp=document.getElementById("user_input").value;
                    var hello='*';

                    for (var i = 0; i < inp.length; i++) {
                    hello+=inp[i].concat('*');
                    }

                    document.getElementById('display').innerHTML = hello;
                    }

                    <!DOCTYPE html>
                    <html>
                    <head lang="en">
                    <meta charset="UTF-8">

                    </head>
                    <body>

                    <form>
                    <label><b>Enter a Message</b></label>
                    <input type="text" name="message" id="user_input">
                    </form>

                    <input type="submit" onclick="showInput();"><br/>
                    <label>Your input: </label>
                    <p><span id='display'></span></p>
                    </body>
                    </html>





                    function showInput() 
                    {

                    var inp=document.getElementById("user_input").value;
                    var hello='*';

                    for (var i = 0; i < inp.length; i++) {
                    hello+=inp[i].concat('*');
                    }

                    document.getElementById('display').innerHTML = hello;
                    }

                    <!DOCTYPE html>
                    <html>
                    <head lang="en">
                    <meta charset="UTF-8">

                    </head>
                    <body>

                    <form>
                    <label><b>Enter a Message</b></label>
                    <input type="text" name="message" id="user_input">
                    </form>

                    <input type="submit" onclick="showInput();"><br/>
                    <label>Your input: </label>
                    <p><span id='display'></span></p>
                    </body>
                    </html>






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 23 '18 at 7:20









                    Aravind Bhat KAravind Bhat K

                    274214




                    274214

























                        0














                        You can loop through all of the numbers and insert a "*" at desired position with substr






                        var input = '000000000000000000000';
                        var newNumbers = input;

                        for (var i = 1; i < input.length * 2 - 1; i = i + 2) {

                        newNumbers = newNumbers.substr(0, i) + "*" + newNumbers.substr(i);
                        }
                        alert(newNumbers);








                        share|improve this answer


























                          0














                          You can loop through all of the numbers and insert a "*" at desired position with substr






                          var input = '000000000000000000000';
                          var newNumbers = input;

                          for (var i = 1; i < input.length * 2 - 1; i = i + 2) {

                          newNumbers = newNumbers.substr(0, i) + "*" + newNumbers.substr(i);
                          }
                          alert(newNumbers);








                          share|improve this answer
























                            0












                            0








                            0






                            You can loop through all of the numbers and insert a "*" at desired position with substr






                            var input = '000000000000000000000';
                            var newNumbers = input;

                            for (var i = 1; i < input.length * 2 - 1; i = i + 2) {

                            newNumbers = newNumbers.substr(0, i) + "*" + newNumbers.substr(i);
                            }
                            alert(newNumbers);








                            share|improve this answer












                            You can loop through all of the numbers and insert a "*" at desired position with substr






                            var input = '000000000000000000000';
                            var newNumbers = input;

                            for (var i = 1; i < input.length * 2 - 1; i = i + 2) {

                            newNumbers = newNumbers.substr(0, i) + "*" + newNumbers.substr(i);
                            }
                            alert(newNumbers);








                            var input = '000000000000000000000';
                            var newNumbers = input;

                            for (var i = 1; i < input.length * 2 - 1; i = i + 2) {

                            newNumbers = newNumbers.substr(0, i) + "*" + newNumbers.substr(i);
                            }
                            alert(newNumbers);





                            var input = '000000000000000000000';
                            var newNumbers = input;

                            for (var i = 1; i < input.length * 2 - 1; i = i + 2) {

                            newNumbers = newNumbers.substr(0, i) + "*" + newNumbers.substr(i);
                            }
                            alert(newNumbers);






                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Nov 23 '18 at 7:21









                            PattePatte

                            596418




                            596418























                                0














                                You could use split('') to divide your input into single characters and join('*') to insert a * after each character:






                                       function showInput() {
                                document.getElementById('display').innerHTML =
                                document.getElementById("user_input").value.match(/.{1}/g).join('*');
                                }

                                <!DOCTYPE html>
                                <html>
                                <head lang="en">
                                <meta charset="UTF-8">
                                </head>
                                <body>

                                <form>
                                <label><b>Enter a Message</b></label>
                                <input type="text" name="message" id="user_input">
                                </form>

                                <input type="submit" onclick="showInput();"><br/>
                                <label>Your input: </label>
                                <p>*<span id='display'></span>*</p>
                                </body>
                                </html>





                                Or you use regex to get the same result:



                                function showInput() {
                                document.getElementById('display').innerHTML =
                                document.getElementById("user_input").value.match(/.{1}/g).join('*');
                                }





                                share|improve this answer


























                                  0














                                  You could use split('') to divide your input into single characters and join('*') to insert a * after each character:






                                         function showInput() {
                                  document.getElementById('display').innerHTML =
                                  document.getElementById("user_input").value.match(/.{1}/g).join('*');
                                  }

                                  <!DOCTYPE html>
                                  <html>
                                  <head lang="en">
                                  <meta charset="UTF-8">
                                  </head>
                                  <body>

                                  <form>
                                  <label><b>Enter a Message</b></label>
                                  <input type="text" name="message" id="user_input">
                                  </form>

                                  <input type="submit" onclick="showInput();"><br/>
                                  <label>Your input: </label>
                                  <p>*<span id='display'></span>*</p>
                                  </body>
                                  </html>





                                  Or you use regex to get the same result:



                                  function showInput() {
                                  document.getElementById('display').innerHTML =
                                  document.getElementById("user_input").value.match(/.{1}/g).join('*');
                                  }





                                  share|improve this answer
























                                    0












                                    0








                                    0






                                    You could use split('') to divide your input into single characters and join('*') to insert a * after each character:






                                           function showInput() {
                                    document.getElementById('display').innerHTML =
                                    document.getElementById("user_input").value.match(/.{1}/g).join('*');
                                    }

                                    <!DOCTYPE html>
                                    <html>
                                    <head lang="en">
                                    <meta charset="UTF-8">
                                    </head>
                                    <body>

                                    <form>
                                    <label><b>Enter a Message</b></label>
                                    <input type="text" name="message" id="user_input">
                                    </form>

                                    <input type="submit" onclick="showInput();"><br/>
                                    <label>Your input: </label>
                                    <p>*<span id='display'></span>*</p>
                                    </body>
                                    </html>





                                    Or you use regex to get the same result:



                                    function showInput() {
                                    document.getElementById('display').innerHTML =
                                    document.getElementById("user_input").value.match(/.{1}/g).join('*');
                                    }





                                    share|improve this answer












                                    You could use split('') to divide your input into single characters and join('*') to insert a * after each character:






                                           function showInput() {
                                    document.getElementById('display').innerHTML =
                                    document.getElementById("user_input").value.match(/.{1}/g).join('*');
                                    }

                                    <!DOCTYPE html>
                                    <html>
                                    <head lang="en">
                                    <meta charset="UTF-8">
                                    </head>
                                    <body>

                                    <form>
                                    <label><b>Enter a Message</b></label>
                                    <input type="text" name="message" id="user_input">
                                    </form>

                                    <input type="submit" onclick="showInput();"><br/>
                                    <label>Your input: </label>
                                    <p>*<span id='display'></span>*</p>
                                    </body>
                                    </html>





                                    Or you use regex to get the same result:



                                    function showInput() {
                                    document.getElementById('display').innerHTML =
                                    document.getElementById("user_input").value.match(/.{1}/g).join('*');
                                    }





                                           function showInput() {
                                    document.getElementById('display').innerHTML =
                                    document.getElementById("user_input").value.match(/.{1}/g).join('*');
                                    }

                                    <!DOCTYPE html>
                                    <html>
                                    <head lang="en">
                                    <meta charset="UTF-8">
                                    </head>
                                    <body>

                                    <form>
                                    <label><b>Enter a Message</b></label>
                                    <input type="text" name="message" id="user_input">
                                    </form>

                                    <input type="submit" onclick="showInput();"><br/>
                                    <label>Your input: </label>
                                    <p>*<span id='display'></span>*</p>
                                    </body>
                                    </html>





                                           function showInput() {
                                    document.getElementById('display').innerHTML =
                                    document.getElementById("user_input").value.match(/.{1}/g).join('*');
                                    }

                                    <!DOCTYPE html>
                                    <html>
                                    <head lang="en">
                                    <meta charset="UTF-8">
                                    </head>
                                    <body>

                                    <form>
                                    <label><b>Enter a Message</b></label>
                                    <input type="text" name="message" id="user_input">
                                    </form>

                                    <input type="submit" onclick="showInput();"><br/>
                                    <label>Your input: </label>
                                    <p>*<span id='display'></span>*</p>
                                    </body>
                                    </html>






                                    share|improve this answer












                                    share|improve this answer



                                    share|improve this answer










                                    answered Nov 23 '18 at 7:23









                                    JnsJns

                                    871112




                                    871112






























                                        draft saved

                                        draft discarded




















































                                        Thanks for contributing an answer to Stack Overflow!


                                        • Please be sure to answer the question. Provide details and share your research!

                                        But avoid



                                        • Asking for help, clarification, or responding to other answers.

                                        • Making statements based on opinion; back them up with references or personal experience.


                                        To learn more, see our tips on writing great answers.





                                        Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                                        Please pay close attention to the following guidance:


                                        • Please be sure to answer the question. Provide details and share your research!

                                        But avoid



                                        • Asking for help, clarification, or responding to other answers.

                                        • Making statements based on opinion; back them up with references or personal experience.


                                        To learn more, see our tips on writing great answers.




                                        draft saved


                                        draft discarded














                                        StackExchange.ready(
                                        function () {
                                        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441865%2fprint-user-input-but-add-a-new-format-or-characters-between-the-numbers%23new-answer', 'question_page');
                                        }
                                        );

                                        Post as a guest















                                        Required, but never shown





















































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown

































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown







                                        Popular posts from this blog

                                        Berounka

                                        Sphinx de Gizeh

                                        Different font size/position of beamer's navigation symbols template's content depending on regular/plain...