Question

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

转换是数组中的每个字符。每个密钥将替换为其对应的值对。

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

以下是代码：

＆＃13;

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;
};

＆＃13;

<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>

＆＃13;

Answer 1

这是一个更简单的实现，它不使用地图，但是根据每个字符的ASCII索引进行数学替换：

＆＃13;

(() => {
  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);
  });
})();

＆＃13;

html, body {
  margin: 0;
  padding: 0;
}

body {
  padding: 60px;
}

form, textarea {
  position: relative;
  width: 100%;
}

＆＃13;

<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>

＆＃13;

Answer 2

您的错误在这里：

var new_str = english;

将其更改为：

var new_str = english.value;

Javascript字符替换

2 个答案: