Insert english characters, get greek characters back (javascript) - Stack Overflow

admin管理员组

文章数量:1335403

I have a task to make a form in which when someone is typing with English characters, the input element of the form via JavaScript will turn the characters to Greek ones automatically, on the input element. Before the submit button is pressed. So, I made a html test file, but I'm not sure if I'm doing this right.

The idea is that on key up, we get the English character(s), then from the object we get the Greek character(s) and then we return them to input element(#fname).

Here is my JavaScript code so far:

 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;

           }
        }
     }

   }

I have a task to make a form in which when someone is typing with English characters, the input element of the form via JavaScript will turn the characters to Greek ones automatically, on the input element. Before the submit button is pressed. So, I made a html test file, but I'm not sure if I'm doing this right.

The idea is that on key up, we get the English character(s), then from the object we get the Greek character(s) and then we return them to input element(#fname).

Here is my JavaScript code so far:

 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;

           }
        }
     }

   }

• javascript

Share Improve this question Follow edited May 18, 2015 at 23:59 Sergiti asked May 18, 2015 at 23:52 SergitiSergiti 15133 silver badges1818 bronze badges 2

• 2 The function can be simplified to function toGreek(chVal,myObject){ var greekVal=[]; for(var i=0;i<chVal.length;i++){ greekVal[i]=myObject[chVal[i]]||chVal[i]; } return greekVal.join(''); }. And it can be even further minimized by using ES6 map. – Sebastian Simon Commented May 19, 2015 at 0:05
• I think the return grArray; returns too early in your code… – Sebastian Simon Commented May 19, 2015 at 0:07

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Not so plicated just to change the characters :

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

demo -> http://jsfiddle/a73Lpq7b/

[Update, now preserving the caret position]

Here, this should work:

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 αβψδεφ

I've created a JSFiddle which does what you want (if I understood correctly).

http://jsfiddle/aerh38xq/1

You first need to attach an event listener to the input object. I've included checks here to make sure that only valid characters will be converted, and that current cursor position will get stored:

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

The toGreek-function switches all characters with either a value from the greekArray or the what is the current input.

var i,
    len,
    result = [];
for (i = 0, len = input.length; i < len; i+= 1) {
    result[i] = greekArray[input[i]] || input[i];
}
return result.join('');

The greekArray is the object with all your greek characters.

I’m not quite sure whether this was your problem but I think the return grArray; causes the function to return too early, i. e. before the loops have finished. This can be eliminated by reducing the plexity of the code.

This function loops only once:

function toGreek(chVal,myObject){
  var greekVal=[];
  for(var i=0;i<chVal.length;i++){
    greekVal[i]=myObject[chVal[i]]||chVal[i];
  }
  return greekVal.join('');
}

The || operator offers an alternative for characters not found in the object of Greek letters by using the English letter instead.

---

Alternatively, use ES6:

function toGreek(chVal,myObject){
  return [].slice.call(chVal).map(a=>myObject[a]||a).join('');
}

I find you can use for...of loop or regExp to the problem:

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

Or you can use regExp and callback style:

...
return chVal.replace(/\w/g, item => myObject[item]);

本文标签： Insert english charactersget greek characters back (javascript)Stack Overflow