我有一个任务是创建一个表单,当有人用英文字符键入时,表单的输入元素将通过JavaScript自动将字符转换为希腊文字符。在按下提交按钮之前。所以,我制作了一个html测试文件,但我不确定我是否正确。
这个想法是,在键盘上,我们得到英文字符,然后从对象中得到希腊字符,然后我们将它们返回到输入element(#fname)
。
到目前为止,这是我的JavaScript代码:
var myObject;
myObject = {
"a" : "α",
"b" : "β",
"c" : "ψ",
"d" : "δ",
"e" : "ε",
"f" : "φ",
"g" : "γ",
"h" : "η",
"i" : "ι",
"j" : "ξ",
"k" : "κ",
"l" : "λ",
"m" : "μ",
"n" : "ν",
"o" : "ο",
"p" : "π",
"q" : ";",
"r" : "ρ",
"s" : "σ",
"t" : "τ",
"u" : "θ",
"v" : "ω",
"w" : "ς",
"x" : "χ",
"y" : "υ",
"z" : "ζ",
";" : ""
};
var ch = document.getElementById("fname"); //gets the value from the input
var chVal = ch.value.split(""); //returns an array
//console.log(chVal);
function toGreek(chVal,myObject){
var grArray = [];
for(var i=0; i<chVal.length; i++){
for(var prop in myObject){
if (myObject.hasOwnProperty(property)) {
if(chVal[i]== myObject[prop])
grArray.push(myObject.prop);
return grArray;
}
}
}
}
答案 0 :(得分:2)
在这里,这应该有效:
function toGreek(input){
var greekObject = {
"a" : "α",
"b" : "β",
"c" : "ψ",
"d" : "δ",
"e" : "ε",
"f" : "φ",
"g" : "γ",
"h" : "η",
"i" : "ι",
"j" : "ξ",
"k" : "κ",
"l" : "λ",
"m" : "μ",
"n" : "ν",
"o" : "ο",
"p" : "π",
"q" : ";",
"r" : "ρ",
"s" : "σ",
"t" : "τ",
"u" : "θ",
"v" : "ω",
"w" : "ς",
"x" : "χ",
"y" : "υ",
"z" : "ζ",
";" : "" //In OP's Question
};
var newStr = '';
for (var substr in input){
newStr += (greekObject.hasOwnProperty(input[substr])) ? greekObject[input[substr]] : '';
}
alert(newStr);
}
toGreek('abcdef1234'); //Returns αβψδεφ
答案 1 :(得分:2)
我不太确定这是否是你的问题,但我认为return grArray;
会导致函数过早地返回 ,i。即在循环结束之前。这可以通过降低代码的复杂性来消除。
此函数仅循环一次:
function toGreek(chVal,myObject){
var greekVal=[];
for(var i=0;i<chVal.length;i++){
greekVal[i]=myObject[chVal[i]]||chVal[i];
}
return greekVal.join('');
}
||
运算符通过使用英文字母为希腊字母对象中找不到的字符提供替代方法。
或者,使用ES6:
function toGreek(chVal,myObject){
return [].slice.call(chVal).map(a=>myObject[a]||a).join('');
}
答案 2 :(得分:2)
我创建了一个JSFiddle,可以做你想要的(如果我理解的话)。
http://jsfiddle.net/aerh38xq/1
首先需要将事件侦听器附加到输入对象。我在这里包含检查以确保只转换有效字符,并且当前光标位置将被存储:
var ch = document.getElementById("fname");
ch.addEventListener('keyup', function(e){
// Only alter on keycode that's in the greek array [a-z] or ';'
if (e.keyCode >= 65 && e.keyCode <= 90 || e.keyCode === 190) {
// Store selection and get new text
var start = ch.selectionStart,
end = ch.selectionEnd,
output = toGreek(ch.value);
// Alter current value
ch.value = output;
// Restore selector position
ch.setSelectionRange(start, end);
}
});
toGreek
- 函数用greekArray中的值或当前输入的值切换所有字符。
var i,
len,
result = [];
for (i = 0, len = input.length; i < len; i+= 1) {
result[i] = greekArray[input[i]] || input[i];
}
return result.join('');
greekArray
是包含所有希腊字符的对象。
答案 3 :(得分:2)
改变角色并不复杂:
function enToGreek(val) {
for (var en in myObject) {
if (val === en) return myObject[en];
}
return val;
}
document.getElementById('fname').onkeyup = function(e) {
var caretStart = this.selectionStart,
caretEnd = this.selectionEnd,
en = String.fromCharCode(e.keyCode).toLowerCase(),
greek = enToGreek(en);
if (en !== greek) {
this.value = this.value.replace(en, greek);
this.setSelectionRange(caretStart, caretEnd);
}
};
演示 - &gt; http://jsfiddle.net/a73Lpq7b/
[更新,现在保留插入位置]
答案 4 :(得分:0)
我发现你可以使用for循环或regExp来解决这个问题:
expect(toGreek('abc')).toEqual("αβψ")
function toGreek(chVal) {
var myObject;
myObject = {
"a": "α",
"b": "β",
"c": "ψ",
"d": "δ",
"e": "ε",
"f": "φ",
"g": "γ",
"h": "η",
"i": "ι",
"j": "ξ",
"k": "κ",
"l": "λ",
"m": "μ",
"n": "ν",
"o": "ο",
"p": "π",
"q": ";",
"r": "ρ",
"s": "σ",
"t": "τ",
"u": "θ",
"v": "ω",
"w": "ς",
"x": "χ",
"y": "υ",
"z": "ζ",
";": ""
};
for (const item of chVal) {
chVal = chVal.replace(item, myObject[item])
}
return chVal;
}
或者您可以使用regExp和回调样式:
...
return chVal.replace(/\w/g, item => myObject[item]);