-1

I have this code:

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

  <input type="text" id="userIn">
  <input type="button" name="name" id="btn" value="Bad Grammar-ify" onclick="badgrammar()">
  <span id="output"></span>
  <script type="text/javascript">
    var userIn = document.getElementById("userIn").value;
    function badgrammar() {
      var userIn = document.getElementById("userIn").value;
      var output = document.getElementById("output");
      var split = new Array();
      split = userIn.split(" ");
      output.innerText = split;
    }
  </script>

</body>
</html>

It works, but it splits user input into one word. How can I make it split user input down to the letter?

Example:

Input: Hi there Output: H,i,t,h,e,r,e

Leedle Lee
  • 11
  • 1
  • 2
  • 1
    `userIn.split("");` (no space in there) will split down to individual characters, but it sounds like you also want to exclude spaces? – user94559 Sep 16 '16 at 19:22

2 Answers2

3

This should do what you want:

var split = userIn.replace(/ /g, '').split('');

Note that there are two steps here:

  1. replace(' ', '') removes all spaces in the input (replaces them with nothing).
  2. split('') splits into individual characters.
user94559
  • 59,196
  • 6
  • 103
  • 103
3

You could use match for that:

s = "hi there";
res = s.match(/\S/g);
console.log(res);

The regular expression \S matches any single character that is not white space. match returns an array with all matches, so indeed it will be an array with single character elements, including all characters from the input, except white space.

Community
  • 1
  • 1
trincot
  • 317,000
  • 35
  • 244
  • 286
  • This solution is a lot more inefficient than the other non regex-based solutions. – rgajrawala Sep 16 '16 at 19:33
  • 2
    @usandfriends, I don't think you'll notice any difference for the partical use that the OP is asking about, namely an HTML `input` element. The overhead of the browser and DOM will be more significant than the execution of this code ;-) – trincot Sep 16 '16 at 19:36
  • Just did a performance test: for a string of 200 000 characters this code took 15 millisecs on my PC. So... I guess performance is *not* an issue here. – trincot Sep 16 '16 at 19:43
  • 1) You're assuming that every client's computer has your computer's specs. 2) You don't know what the use case of this code is, e.g. when it will be run, how it will be used. 3) You're using the inefficiency of another part of the application to justify your own code's inefficiency? That doesn't seem right... – rgajrawala Sep 16 '16 at 19:46
  • 1
    1) I am not assuming that, which is why I said: *on my PC*. I *am* assuming that todays PCs are not more than 20x slower than my laptop. 2) The use case of the code was given in the question. The user clicks a button to test their input. The individual characters are then output in another HTML element. 3) I am not *using* anything. I provide a pragmatic answer that is adapted to the question at hand, that's all. – trincot Sep 16 '16 at 19:54
  • @usandfriends Sorry, but I don't think you really know what you are talking about. The time difference is not notably, whatever computer you have. And, btw., we are in 2016. You can expect people have a better pc than a commodore... This answer for sure is the best - simply because it's very easy to debug and a single function call. – baao Sep 16 '16 at 19:54
  • @trincot Alright. For what it's worth I tested this on my computer and it seems to be ~2x slower (3 sec for the other solutions, 6 sec for this). Anyways, I don't want to keep arguing about something so trivial. if you could add a comment to mention exactly how your solution works so anyone who comes around not knowing how Regex works can understand it, that would be great. +1 – rgajrawala Sep 16 '16 at 20:17