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>

我希望输入到英文字体中的文本保持不变，并且替换发生在albhedform中。因此，当人们输入一个方框或另一个方框时，这类似于谷歌翻译的响应方式。

<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 =＆gt;替换[c.toLowerCase（）。charCodeAt（0） - 97]”

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

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

有人能帮助我吗？

Answer 1

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

一种选择是使用替换器函数替换正则表达式。为此，查找表可用于所有字符。例如以下内容创建了一个包含所有必需替换项的Map：

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

展开下面的代码段以获取示例

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

在javascript中使用replace（）在textarea中替换字符

1 个答案: