JavaScript 字符替换

Question

我正在尝试创建一个翻译工具，人们可以在其中将文本输入到表单中，并且每次击键都会自动将翻译处理到相应的表单中。

翻译是针对数组中的每个字符进行的。每个键将被替换为其相应的值对。

我不知道为什么文本不会输出。

这是代码:

var array = {
  'a': 'z',
  'b': 'y',
  'c': 'x',
  'd': 'w',
  'e': 'v',
  'f': 'u',
  'g': 't',
  'h': 's',
  'i': 'r',
  'j': 'q',
  'k': 'p',
  'l': 'o',
  'm': 'n',
  'n': 'm',
  'o': 'l',
  'p': 'k',
  'q': 'j',
  'r': 'i',
  's': 'h',
  't': 'g',
  'u': 'f',
  'v': 'e',
  'w': 'd',
  'x': 'c',
  'y': 'b',
  'z': 'a'
};

var english = document.getElementById('englishform');
var backwards = document.getElementById('backwardsform');

var new_str = english;

for (var key in array) {
  if (!array.hasOwnProperty(key)) {
    continue;
  }

  new_str = new_str.replace(new RegExp(key, "g"), array[key]);
}

english.value = new_str;

english.onkeyup = function() {
  backwards.value = english.value;
};

<form action="home.html" method="post">
  <textarea class="form-control" id="englishform" placeholder="Enter English" rows="15">
    </textarea>
</form>
<form>
  <textarea class="form-control" id="backwardsform" placeholder="Enter Backwards English" rows="15">
    </textarea>
</form>

Answer 1

这是一个更简单的实现，不使用映射，而是根据每个字符的 ASCII 索引进行数学替换:

(() => {
  const english = document.getElementById('englishform');
  const backwards = document.getElementById('backwardsform');
  const regexp = /([A-Z])|([a-z])/g;
  const upperBounds = [...'AZ'].map(c => c.charCodeAt(0));
  const lowerBounds = [...'az'].map(c => c.charCodeAt(0));

  function replacer(match, upper, lower) {
    let min, max;
    let value = (upper || lower).charCodeAt(0);

    if (upper) {
      [min, max] = upperBounds;
    } else {
      [min, max] = lowerBounds;
    }

    return String.fromCharCode(max - value + min);
  }

  english.addEventListener('input', () => {
    backwards.value = english.value.replace(regexp, replacer);
  });

  backwards.addEventListener('input', () => {
    english.value = backwards.value.replace(regexp, replacer);
  });
})();

html, body {
  margin: 0;
  padding: 0;
}

body {
  padding: 60px;
}

form, textarea {
  position: relative;
  width: 100%;
}

<form action="home.html" method="post">
  <textarea class="form-control" id="englishform" placeholder="Enter English"></textarea>
</form>
<form>
  <textarea class="form-control" id="backwardsform" placeholder="Enter Backwards English"></textarea>
</form>