如何在用户输入时检测用户的语言

Question

guys i have a problem with this thing , i must know which language the user is using while typing in an input text to handle some bad shaped things and i even looked at this in here but it didn't helped me , can u guys help me with the right code ?
the languages i must know are english and persian :| thanks :) i need some javascript helps

<input type="text" id="give_me_the_lang">
<div id="show_lang_in_here"></div>

Answer 1

Here is the solution that doesn't really detect language, but just checks if users input contains only English alphabet. If it does, it writes "English" in div, otherwise it writes "Persian". Code:

 document.getElementById("give_me_the_lang").addEventListener("keyup", function() { if (/^[a-zA-Z]+$/.test(this.value)) { document.getElementById("show_lang_in_here").innerHTML = "English"; } else { document.getElementById("show_lang_in_here").innerHTML = "Persian"; } }); 

 <input type="text" id="give_me_the_lang"> <div id="show_lang_in_here"></div> 

Expression ^[a-zA-Z]+$ only checks the letters of English alphabet, if you write in number or any other character, the result will be "Persian".

Answer 2

Detecting language is a task that a plain if else or switch case won't be able to solve... you got a computer learning problem to solve here my friend.

The good thing is, that there are already crazy geniuses out there that already solved your problem, so why don't use their available solution?

https://cloud.google.com/translate/v2/getting_started#language_detect

1. Signup for the Google Cloud platform
2. Activate the access to the Google Translate API
3. Get a Browser access token for your API. You need this token in order to use it from JavaScript.
4. Now wire up your UI and let them do the magic.

Your HTML will remain the same. Just make sure you also include jQuery.

<input type="text" id="give_me_the_lang" />
<div id="show_lang_in_here"></div>

Now lets wire up the UI

$(function(){

    /* We want to listen to the keypress events from the user 
    *  Each time the user stops typing we wait a few milliseconds and then
    *  we ask Google to detect the language for us */
    var timeoutID;

    /* Replace this with your Google Translate API key */
    var myKey = 'XXXX';

    var detectLanguage = function(){

        $.ajax({
            method: 'GET',
            url: 'https://www.googleapis.com/language/translate/v2/detect',
            data: {
               key: myKey,
               q: $('#give_me_the_lang').val()
            }           
        }).done(function(response){

           /* Push the response to the UI */
           $('#show_lang_in_here').text(JSON.stringify(response.data.detections));
        });        
    };

    $('#give_me_the_lang').on('keyup, keypress, change', function(){
        clearTimeout(timeoutID);

        /* Lets wait half a second */
        setTimeout(detectLanguage, 500);
    });
});

The thing to parse in the response is the array of detections that Google will send back.

{
    "data": {
       "detections": [
         [
           {
            "language": "de",
            "isReliable": false,
            "confidence": 0.049747143
           }
         ]
       ]
    }
}

Which is a perfect example of overly complicated computation result... so, I would say, if the guy gives you one guess, use it, if the guy gives you more, the pick the one you think is the most approximate for your user base (you don;t have customers in North Korea or in Bolivian Quechua territory do you?)