在 javascript 的文本区域中使用 replace() 进行字符替换

Question

我在构建这个有助于字符翻译的工具时遇到了问题。到目前为止，我有这个：

<form>
    <textarea class="form-control" id="englishform" onkeyup="replacer('englishform')" onkeydown="replacer('englishform')" placeholder="Enter English" rows="15"></textarea>
</form>
<form>
    <textarea  class="form-control" id="albhedform" placeholder="Enter Al Bhed" rows="15"></textarea>
</form>

我想让以英文形式输入的文本保持不变，并以字母形式进行替换。所以这类似于 google 当人们在一个框或另一个框中键入时翻译的响应方式。

<script type="text/javascript">

    function replacer(e){
    var english = document.getElementById(e);
    var albhed = document.getElementById('albhedform');

    english.value = english.value.replace(/a/g, "y");   
    english.value = english.value.replace(/b/g, "p");
    english.value = english.value.replace(/c/g, "l");
    english.value = english.value.replace(/d/g, "t");
    english.value = english.value.replace(/e/g, "a");
    english.value = english.value.replace(/f/g, "v");
    english.value = english.value.replace(/g/g, "k");
    english.value = english.value.replace(/h/g, "r");
    english.value = english.value.replace(/i/g, "e");
    english.value = english.value.replace(/j/g, "z");
    english.value = english.value.replace(/k/g, "g");
    english.value = english.value.replace(/l/g, "m");
    english.value = english.value.replace(/m/g, "s");
    english.value = english.value.replace(/n/g, "h");
    english.value = english.value.replace(/o/g, "u");
    english.value = english.value.replace(/p/g, "b");
    english.value = english.value.replace(/q/g, "x");
    english.value = english.value.replace(/r/g, "n");
    english.value = english.value.replace(/s/g, "c");
    english.value = english.value.replace(/t/g, "d");
    english.value = english.value.replace(/u/g, "i");
    english.value = english.value.replace(/v/g, "j");
    english.value = english.value.replace(/w/g, "f");
    english.value = english.value.replace(/x/g, "q");
    english.value = english.value.replace(/y/g, "o");
    english.value = english.value.replace(/z/g, "w");
    }
/* I thought this would work in moving the replaced text to the albhedform, but it doesn't */
/*
    english.onkeyup = function() {
    albhed.value = english.value;
    };
*/

</script>

每敲一次新键，所有字符都会被再次替换，导致翻译错误。我错过了什么？我是否必须为用于字符翻译的字符创建一个包含键值对的数组？

感谢@Me.Name，我现在工作得更好了，但我仍然缺少翻译。

看下面的代码：

<form>

    <textarea class="form-control" id="englishform" onkeyup="replacer('englishform')" onkeydown="replacer('englishform')" placeholder="Enter English" rows="15"></textarea><br />
</form>
<form>
    <textarea  class="form-control" id="albhedform" placeholder="Enter Al Bhed" rows="15"></textarea>
</form>


<script type="text/javascript">
function replacer(e){
    var replacement = ['y', 'p', 'l', 't', 'a', 'v', 'k', 'r', 'e', 'z', 'g', 'm', 's', 'h', 'u', 'b', 'x', 'n', 'c', 'd', 'i', 'j', 'f', 'q', 'o', 'w']; 
    var english = document.getElementById(e);
    var albhed = document.getElementById('albhedform');
    albhed.value = english.value.replace(/[a-z]/gi, replacement/*here is the issue */); 
}
</script>

所以问题出在 replace() 方法的后半部分。我似乎无法使用 "c => replacements[c.toLowerCase().charCodeAt(0) - 97]"

将正则表达式括号替换为字母

albhed.value = english.value.replace(/[a-z]/gi, c => replacements[c.toLowerCase().charCodeAt(0) - 97]

有人可以帮我吗？

Answer 1

问题有两方面：首先是原始文本在每个（子）替换操作中被替换为 english.value=。第二个是通过分步进行替换，以前的替换可以呃......重新替换。

一种选择是使用替换函数来替换正则表达式。为此，可以对所有字符使用查找 table。例如以下创建一个包含所有必需替换项的地图：

var replacements = new Map(Array.from({length:26},  (v,i)=> [String.fromCharCode(97 + i), 'ypltavkrezgmshubxncdijfqow'[i] ]));

这可以用于正则表达式替换器，（或通过映射所有字符）：

albhedform.value = english.value.replace(/[a-z]/gi, c => replacements.get(c.toLowerCase()) || c);

展开下面的代码片段作为示例

var replacements = new Map(Array.from({length:26},  (v,i)=> [String.fromCharCode(97 + i), 'ypltavkrezgmshubxncdijfqow'[i] ]));

function replacer(english){
    var albhed = document.getElementById('albhedform');
    
    albhedform.value = english.value.replace(/[a-z]/gi, c => replacements.get(c.toLowerCase()) || c);
}

<form>
    <textarea class="form-control" id="englishform" onkeyup="replacer(this)"  placeholder="Enter English" rows="5"></textarea>
</form>
<form>
    <textarea  class="form-control" id="albhedform" placeholder="Enter Al Bhed" rows="5"></textarea>
</form>

或者如果只需要字母表（以后不需要其他字符），可以通过简单地为每个字母保留一个字符串来进一步简化

var replacements = 'ypltavkrezgmshubxncdijfqow';
//.....
//function
    albhedform.value = english.value.replace(/[a-z]/gi, c => replacements[c.toLowerCase().charCodeAt(0) - 97]);

var replacements = 'ypltavkrezgmshubxncdijfqow';

function replacer(english){
    var albhed = document.getElementById('albhedform');    
    albhedform.value = english.value.replace(/[a-z]/gi, c => replacements[c.toLowerCase().charCodeAt(0) - 97]);
}

<form>
    <textarea class="form-control" id="englishform" onkeyup="replacer(this)"  placeholder="Enter English" rows="5"></textarea>
</form>
<form>
    <textarea  class="form-control" id="albhedform" placeholder="Enter Al Bhed" rows="5"></textarea>
</form>

在 javascript 的文本区域中使用 replace() 进行字符替换

Using replace() for character replacement in a textarea in javascript

javascript

translation

replace