CODEWITHSUNDEEP
javascript
Sergiti
Sergiti

Reputation: 151

Insert english characters, get greek characters back (javascript)

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;

           }
        }
     }

   }

Upvotes: 3

Views: 1861

Answers (5)

Youth overturn
Youth overturn

Reputation: 417

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

Upvotes: 0

Sebastian Simon
Sebastian Simon

Reputation: 19505

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 complexity 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('');
}

Upvotes: 2

bvx89
bvx89

Reputation: 888

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

http://jsfiddle.net/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.

Upvotes: 2

Quill
Quill

Reputation: 2755

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

Upvotes: 2

davidkonrad
davidkonrad

Reputation: 85558

Not so complicated 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.net/a73Lpq7b/

[Update, now preserving the caret position]

Upvotes: 3

Related Questions