Index characters from an array based on user input

Question

I have an array of the entire alphabet from a to z. I also have an input field. I want to be able to find the index of each character from the input field in the alphabet array but my function doesn't work. I've tried storing the text from the input field into an array, and I've tried using a named function for it as well but neither worked.

<input type="text" id="plaintext" placeholder="Plaintext">
<div id="start"><div id="start_text">Start</div></div>

let plaintext = document.getElementById("plaintext");
let alph = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
let startB = document.getElementById("start");
let plainParser = [];

startB.addEventListener('click', () => {
    for(let i=0; i < alph.length; i++){
        console.log(alph.findIndex( () => plainParser.push(plaintext.value.split(''))));
    };
});

Answer 1

A shortcut without needing the array is use the charCode of each character.

a starts at 97

 const str = 'abc'; for(let s of str){ console.log(s.charCodeAt(0) - 97); }

Answer 2

I want to … find the index of each character from the input field in the alphabet array

Then instead of looping from 0 to 25:

for(let i=0; i < alph.length; i++){

you should loop over every character from the input:

for (let c of plaintext.value) {

I want to … find the index of each character from the input field in the alphabet array

You have the character, so find the index:

alph.indexOf(c)

v'là.

let plaintext = document.getElementById("plaintext");
let alph = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
let startB = document.getElementById("start");

startB.addEventListener('click', () => {
    for (let c of plaintext.value) {
        console.log(alph.indexOf(c));
    }
});

Answer 3

Here's a slightly refactored version of what I think you are looking for:

 const alphabet = 'abcdefghijklmnopqrstuvwxyz'; const result = document.querySelector(".result"); const plaintext = document.getElementById("plaintext"); const startB = document.querySelector(".start"); startB.addEventListener('click', () => { const source = plaintext.value; result.innerText = ''; if (!source) return; const indices = []; for (let char of source) { indices.push(alphabet.indexOf(char)); } result.innerText = indices.join(', '); });

 <input type="text" id="plaintext" placeholder="Plaintext"> <button class="start">Start</button> <div class="result" style="font-family: monospace;"></div>

Answer 4

Here's a demo that fires on keyup event and converts user input to Unicode on every keystroke. There is a comment with alternate code if you want to have user input converted to 0 to 25 index instead.

 const az = document.forms[0]; const intArray = (node) => { return JSON.parse(JSON.stringify(`[${node.textContent}]`)); }; const dataKey = event => { const txt = event.target.value; const view = event.currentTarget.elements.view; /* swap lines if you want indexes 0 to 25 view.textContent += (event.which - 65) + ', '; */ view.textContent += event.which + ', '; }; az.onkeyup = event => { dataKey(event); let result = intArray(az.elements.view); console.log(result); };

 :root { font: 400 16px/1.3 Consolas } textarea, output { display: block; font: inherit } fieldset { width: fit-content; } #text { display: block; width: 98%; }

 <form id='az'> <fieldset> <legend>Unicode UTF-16</legend> <textarea id="text"></textarea> <output id='view'></output> </fieldset> </form>