Change Letters into Numbers seperated by commas?

Question

I am trying to create a button that displays the text from the "TextCollector" input as numbers seperated by commas and ignores any symbol that is not in the alphabet. Update: I also need it to ignore the fact that a letter is capitalized.

Example:

a = 1

b = 2

c = 3

and so on...

So if I typed in "cat's" in the input at the bottom would display "3,1,20,19".

Here's what I've tried so far:

<form action="">
  <input type="text" id="TextCollector" name="TextCollector" placeholder="Type in something">
  <br>
  <input type="button" value="Submit" onclick="ShowMe()">
</form>


<h1 id="numbers"></h1>


<script>
  function ShowMe() {
    var text = document.getElementById("TextCollector").value;
    var textnum = text.charCodeAt(0) - 97;

    document.getElementById("numbers").innerHTML = textnum;
  }

</script>

But the code I tried halfly works, it just displays the first letter as a number and ignores the rest. Also with my code "0" is "a", but I need "1" to be "a".

Can someone help me? I hope I made myself clear...

Answer 1

Allow me to introduce to you a few concepts which I highly recommend you learn instead of copy-pasting any code given to you. I'm not going to go into great detail because, honestly, all you have to know is how to ask the correct question on the google search bar to get your answer. I'll also talk about how you can develop a strategy to solving problems such as this one at the end of the post.

Loops

You use a loop in programming when you want to repeat a set of instructions multiple times. There are multiple ways to write a loop, the two most popular ways of writing a loop are: the for loop, and the while loop. Other less popular methods include do loop, recursion, etc.

Types

Javascript is weakly typed, which makes for a lot of weird and unexpected behavior i you try to add a bool value with an integer. Examples of primitive types are: Integer, Boolean, Char, String, etc. Numbers can be represented in multiple ways: integer, double, float. Don't worry too much about the differences between each of these, but if you need to use decimals and negative values, use floats. Boolean is either TRUE or FALSE. Char (short for Character) is a map between a number and a letter. (Read this document if you care to learn why your code outputs a "0" instead of a "1" when you run this line:

text.charCodeAt(0) - 97;

Operators

You should know what +, -, *, /, do grade school math class. You should also know > (greater than), < (less than), >= (greater than or equal), <= (less than or equal), == (equals), != (not equal), && (intersection, also known as AND), || (union, also known as OR). There are also some quality of life operators such as: ++ (increment value by 1), -- (decrement value by 1), += (increase target value by given amount), -= (decrease target value by given amount) etc etc....

THE ANSWER

Tie all this knowledge together, and we arrive at a solution.

string text = document.getElementById("TextCollector").value;
var i;
var textnum;

//create empty string variable to append char values to
var myString = '';
for (i = 0; i < text.length; i++)
{
    //Convert char to number
    textnum = text.charCodeAt(i) - 96;

    //concatenate textnum to string, and add a comma at the end
    myString = myString + textnum + ",";
}

//remove the last unwanted comma by applying "substr" method to the string
myString = myString.substr(0,myString.length - 1);
document.getElementById("numbers").innerHTML = textnum;

I encourage you to ask questions you do not understand from the solution above.

**Edit: The strategy to solving any problem is to break it down into sub-problems. Your goal is turn a bunch of characters from a string into numbers. Ask yourself these questions:

1. How can I turn characters into numbers?

Well, from the looks of your code it looks like you already knew how. Next question

2. How can I turn all characters into numbers, not just the starting character? Ok, take a closer look to the method you applied to your "text" value

   charCodeAt(0)

That zero represents the index of a string. A string is an array of char, and if you understand how arrays work, it should be no surprise why it only returns the first character.

3. Ok so, how can I apply this charCodeAt() method to ALL my characters?

This is a little tricky because if you don't know the concept of loops in programming (or recursion), you are not adequately equipped to solve these problems. There are many free online resources for learning basic programming concepts such as loops. I recommend this site here: https://www.w3schools.com/

5. Ok I can turn multiple characters to numbers. How do I glue them together into a single string?

This is something you can google. That's what I did. Hint: how to add chars to the end of a string

6. How do I get rid of the last comma in my string?

Google: How do I remove last char in a string?

Sources:

https://en.wikipedia.org/wiki/Control_flow#Loops

https://en.wikipedia.org/wiki/Primitive_data_type

https://www.w3schools.com/js/js_loop_for.asp

https://www.w3schools.com/js/js_string_methods.asp

https://codehandbook.org/remove-character-from-string/

Answer 2

First .replace all non-alphabetical characters with the empty string, then you can turn the resulting string into an array, .map each character to its character code, and join it by commas:

function ShowMe() {
  const replaced = document.getElementById("TextCollector").value.replace(/[^a-z]/gi, '').toLowerCase();
  document.getElementById("numbers").textContent = [...replaced]
    .map(char => char.charCodeAt(0) - 96)
    .join(', ');
}

<form action="">
  <input type="text" id="TextCollector" name="TextCollector" placeholder="Type in something">
  <br>
  <input type="button" value="Submit" onclick="ShowMe()">
</form>


<h1 id="numbers"></h1>