Question

我需要将字符串中的所有字母替换为其他符号（存储在数组中）。

for (var i = 0; i < letters.length; i++) {
  output.value = input.value.replace(letters[i], signs[i]); //this should be global
}

var input = document.getElementById('input');
var output = document.getElementById('output');

var letters = ['a', 'b', 'c'];
var signs = ['.', ':', '-'];

function run() {
  for (var i = 0; i < letters.length; i++) {
    output.value = input.value.replace(letters[i], signs[i]); //this should be global
  }
}

<input type="text" id="input" onkeyup="run();">
<input type="text" id="output">

如果输入内容为“ abc”，则输出内容应为“。：-”

Answer 1

我会将您的字母和符号变成一个查找表，例如：

{a: ',', b:':' // etc..}

因此您无需在每次键入按键时都在字母中进行搜索。您可以在开始时执行一次，也可以只使用格式开头。您可以map()将其设置为新值

var input = document.getElementById('input');
var output = document.getElementById('output');

var letters = ['a', 'b', 'c'];
var signs = ['.', ':', '-'];

let signMap = letters.reduce((a, c, i) => {
  a[c] = signs[i]
  return a
}, {})

function run() {
  output.value = [...input.value].map((i) => signMap[i]).join('')
}

<input type="text" id="input" onkeyup="run();">
<input type="text" id="output">

如果您的字母总是按顺序排列，则另一种替代方法是使用字符代码查找符号。您也可以使用带有常规正则表达式的replace并将字母传递给函数。这样就可以完全避免循环。这样会忽略不在符号中的输入，但是如果原始字母不在符号数组中，则可以轻松地将其包括在内。

var input = document.getElementById('input');
var output = document.getElementById('output');

var signs = ['.', ':', '-'];
let offset = 'a'.charCodeAt(0)

function run() {
  output.value = input.value.replace(/./g, s => signs[s.charCodeAt(0) - offset] || '' )
  }

<input type="text" id="input" onkeyup="run();">
<input type="text" id="output">

Answer 2

我的观点：

我更喜欢创建一个对象来存储所有映射，就像signMap一样。
创建一个像(a|b|c|ef)这样的正则表达式（因此您不需要循环输入字符串的每个字符，即使它也可以支持多个字母）。 PS ：假设Array = {letters中的元素不是特殊字母，如果是，则需要根据实际情况调整正则表达式。
然后使用String.replace(regex, (replacement)=>{return 'what you need'})

就像下面的简单演示一样：

var input = document.getElementById('input');
var output = document.getElementById('output');

var letters = ['a','b','c', 'ef'];
var signs = ['.',':','-', '@'];

let regex = new RegExp('('+letters.join('|') + ')', 'g') //assume the elements in Array=letters doesn't have special characters.
let signMap = letters.reduce((pre, cur, curIndex) => {
  pre[cur] = signs[curIndex]
  return pre
}, {})

function run() {
  output.value = input.value.replace(regex, (item)=> {
    return signMap[item]
  });
}

<input type="text" id="input" onkeyup="run();">
<input type="text" id="output">

Answer 3

问题在于替换步骤之后的新更新值，您需要做的是存储新值并替换整个字符集，然后将新值设置为output.value。

这里的一个重要细节是，您需要用特定的字母替换所有与之匹配的字符，以实现可以构建Regexp并使用全局标记g。

new RegExp(letters[i], 'g');
                        ^
                        |
                        +---- This is the flag!

我建议的另一件事是使用函数addEventListener将事件绑定到元素。

var input = document.getElementById('input');
var output = document.getElementById('output');

var letters = ['a', 'b', 'c'];
var signs = ['.', ':', '-'];

function run() {
  var currentInput = this.value;
  for (var i = 0; i < letters.length; i++) {
    var rg = new RegExp(letters[i], 'g');
    currentInput = currentInput.replace(rg, signs[i]);
  }
  output.value = currentInput;
}

input.addEventListener('input', run);

<input type="text" id="input">
<input type="text" id="output">

遍历.replace（）中的数组

3 个答案: