基于用户输入的数组中的索引字符

Question

我有一个从a到z的整个字母表的数组。我还有一个输入字段。我希望能够从字母数组的输入字段中找到每个字符的索引，但我的函数不起作用。我尝试将输入字段中的文本存储到数组中，我也尝试为其使用命名函数，但都没有奏效。

<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从 97 开始

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

Answer 2

我想。。。从字母数组的输入字段中查找每个字符的索引

然后，而不是从 0 循环到 25：

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

您应该遍历输入中的每个字符：

for (let c of plaintext.value) {

我想。。。从字母数组的输入字段中查找每个字符的索引

你有字符，所以找到索引：

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

这是我认为您正在寻找的内容的稍微重构的版本：

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>