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

                    2991215




                    2991215

























                        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

                            636520




                            636520























                                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

                                    1,0431513




                                    1,0431513






























                                        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.




                                        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







                                        這個網誌中的熱門文章

                                        Xamarin.form Move up view when keyboard appear

                                        Post-Redirect-Get with Spring WebFlux and Thymeleaf

                                        Anylogic : not able to use stopDelay()