Javascript in HTML

manit123 · #1 13-Jul-2012, 01:02

hi ,
I have this fantastic idea of creating a web page that does transliteration like google except spelling suggestion.
My idea is to take input from user in text box & process on receiving a space.
For this purpose I think , I will need ajavascript which will dynamically transliterate.
Can you tell me is there is any function which can pass string just input for processing ?
Suppose user has already written 'ALREADY'
Now he appends " new "
after last white space key press the string 'new' should be retrieved .
Another java function will process 'new' to create hindi word .

The advantage is you have transliteration using a webpage .

Please suggest ?
I know bit of html & java.

TurboPT · #2 13-Jul-2012, 20:25

Do you mean something like this?

In this example, any misspelled 'gren' [green] or 'yelow' [yellow] is converted/translated to the correct spelling.
This is checked as any space is entered within the text field.

HTML Code:


<html>
<head>
<script type="text/javascript">
	const SPACE = 32;
	
	var replacements = {"gren":"green","yelow":"yellow"};
	
	function checkKey(e) {
	
		var key = e.keyCode ? e.keyCode : e.charCode;

		if ( key == SPACE ) {
			var text = document.getElementById("t1").value;

			for ( var x in replacements) {
				text = text.replace(x, replacements[x]);
			}

			document.getElementById("t1").value = text;
		}
	}
</script>
</head>
<body>
<label for="t1">Type something</label>
<input id="t1" type="text" size="100" onkeyup="checkKey(event);" />
</body>
</html>

Of course, this would have issues if 'gren' or 'yelow' happened to part of other words, but I'll leave that for you to ponder.

manit123 · #3 13-Jul-2012, 21:01

Thank you TurboPT for your valuable reply.
I am looking for something similiar.
I understood that on every keypress check key is called then if it is a space then you retrieve the whole text typed into text box & replace gren by green & yelow by yellow.
Is it possible to retrieve only the last word.
Example if text box has : teraa naam kyaa hai then like google transliterate we will already have तेरा नाम क्या so as user presses space after hai . I want to process "hai" which my transliterate function will convert to है .

TurboPT · #4 13-Jul-2012, 21:10

The problem is, how/when do you know that their input IS the last word followed by a space?
[as more typing could possibly follow]

My help might be limited, but figured that could be a start.

I guess you could check for that word with the trailing space included, but that would be need to be determined based on your need[s]. I don't know your language, but I'm sure that word could appear more than once in any potential input?

manit123 · #5 13-Jul-2012, 21:24

as soon as user presses space we will grab the last letter of text area & keep going backwards till we encounter another space . So whatever we have read is the last word spelled backwards . Isn't it ?

TurboPT · #6 13-Jul-2012, 21:34

...but you said [in post #1] "process on receiving a space", so that sounds different now, and you have added 'textarea', instead of 'textbox'...?
So, how do you expect the operation to actually behave?

The difference almost sounds like after a submit, or some other operation.

manit123 · #7 14-Jul-2012, 11:57

if you are not able to see hindi font then please see
www.ffonts.net
OR
www.devanagarifonts.net

sorry , i thought textarea & textbox mean same.
i don't want user to press any button for transliteration.
QUESTION)Are there any functions in javascript which can retrieve word from string ?

in your original code , i think you get the whole 'whatever user typed'.

Let us say , if there is no way to get last word .
Then my next option is to transliterate whatever user has typed so far .
There will be another window which shows hindi text in case we are not able to get last word typed in text box.
The function below will be used when I want to add unicode characters to that transliteration window

Code:

		<SCRIPT LANGUAGE="JavaScript">
		<!--
			function appendCharacter(code)
			{
			    var inputField = document.getElementsByName('trasnsliterate-window')[0];
			    var newValue = inputField.value + String.fromCharCode(code);
			    inputField.value = newValue;
			}
		//-->
		</SCRIPT>

I want to transliterate as follows
Rules will be

Code:

I will call matra (अ  आ   इ  ई   उ  ऊ    ए  ऐ   ओ  औ )as vowel denoted in english as a,A,i,I,u,U,e,ai,o,au 
k=क   kh=ख  g=ग  gh=घ  ch=च   chh=छ  j=ज  jh=झ   T=ट  Th=ठ   D=ड  Dh=ढ   N=ण t=त   th=थ   d=द   dh=ध   n=न 
p=प  ph=फ  b=ब   bh=भ  m=म   y=य  r= र   l= ल   v= व   sh=श   Sh=ष   s=स  h=ह
some akshar of hindi varnmala have been left out .
we are not considering half letters

Now the process will be as follows

Code:

begin
history=nothing
#history is consonant means a matraa will be added to previous otherwise it is start of new letter
#word is the string which will replace english spelling . In your case you knew what you have to replace . Here I don't.
word=empty
stack=0
letter=get-character-from-string
while(letter!=end of string)
{	put letter in stack;
		if(letter=space)
		{	;
		}
		if(letter is k g c j T D N t d n p b m y r l v s h)
		{	That means we have a consonant
			nextletter=getnext
			while(nextletter!=a,A,i,I,u,U,e,o)
			{	put nextletter in stack
				nextletter=getnext
			}
			switch(strlen(stack))
			{	case 2: it can be kh ख , gh घ  , ch च , jh झ  , Th ठ , Dh ढ , th थ , dh ध , ph फ , bh भ , sh श , Sh ष ; akshar=unicode number of whichever matched;break;
				case 3: it is chh छ ; akshar=2331 because छ is छ ;break;
				case 1: it can be k क ,g ग , j ज , T ट , D ड , N ण ,T त ,D द , n न , p प , b ब , m म , y य , r र  , l ल  , v व , s स , h ह ; akshar=unicode number of whichever matched;break;
			}
			history=consonant;
			letter=nextletter;
			appendCharacter(akshar);
		}
		if(letter is not a,A,i,I,u,U,e,o )		
		{	#let us find matraa
			nextletter=getnext;
			while(nextletter!=consonant i.e k g c j T D N t d n p b m y r l v s h)
			{	put nextletter in stack;
				nextletter=getnext
			}
			if(history==nothing)
			{	#that means this is beginning of another matraa letter आ  ( not ा   which is matraa to previous one )
				switch(strlen(stack))
				{	case 1; a अ  , A आ, i इ, I ई, u उ, U ऊ, e ए, o ओ ; matraa letter=unicode number of whichever matches;break;
					case 2; ai ऐ , au औ ; matraa letter = unicode number of whichever matches;break;
				}
				appendCharacter(matraa letter);
			}
			else
			{	switch(strlen(stack))
				{	case 1; a add nothing  , A ा, i ि, I  ी, u ु , U ू, e े, o ो ; matraa = unicode number of whichever matches;break;
					case 2; ai ै  , au ौ ; matraa = unicode number of whichever matches;break;
				}
				if(matraa!=nothing)
					appendCharacter(matraaa);
			}
			letter=nextletter;
		}
	empty stack;
}

TurboPT · #8 14-Jul-2012, 14:17

Quote:

Originally Posted by manit123

sorry , i thought textarea & textbox mean same.

Sort of...but the controls do differ. [the operation I proposed would technically be the same for both]

Quote:

Originally Posted by manit123

i don't want user to press any button for transliteration.

Ok.

Quote:

Originally Posted by manit123

QUESTION)Are there any functions in javascript which can retrieve word from string ?

in your original code , i think you get the whole 'whatever user typed'.

Let us say , if there is no way to get last word .

Yes, it possible to get a 'word' from a string, it would just depend on what function would be best used for the intent as there are at least a few that could be used to get words. There is also javascript regular expressions that might be more useful based on the proximity of the "next" characters to do replacements.

In my original code, yes, I do get "whatever user typed", because the user can "click back" to a previous [or any other] point in the line and make a change, so whenever this happens, ANY changes will be checked.

The "Last Word" - I'm not sure what would "trigger" that the user is done with input to know the need to check the "last word"...what is your basis?

Quote:

Originally Posted by manit123

Then my next option is to transliterate whatever user has typed so far .
There will be another window which shows hindi text in case we are not able to get last word typed in text box.

Which is what I sort of already started, but without another window, of course.

manit123 · #9 14-Jul-2012, 20:18

In your example , it is suitable & better to fix spelling of 'green' & 'yellow' in whole textbox/textarea(consider both words as interchangeable).

Whereas in mine , My ideal method will be to use just one window & get the word as soon as user presses space & replace it by hindi equivalent. This way at any time , all words will be in hindi except the one which is being spelled in english & has not been terminated with space. In case , user modifies previously typed words (which are now in hindi) : I will see later what happens in that case .

Let us say , my ideal presumption seems difficult to implement now.
Then I am fine with two windows . The one in which user types & as soon as he presses space 'whole text' is converted to hindi & transliteration window gets fully rewritten.

As you must have seen , I have mentioned abstract algorithm in my previous post.
I know a bit of C in which there are functions to get character by character from stream.
QUE)Is there any such function in java ?
QUE)Also any if/else equivalent to decide what takes precedence ?

I will try to use string manipulation function & regexp and report here on my progress & further queries.
QUE)For trial purpose how can I echo variable values to debug window to see how my function is behaving ?

Thank You.

manit123 · #10 14-Jul-2012, 23:15

Ignore my previous post .
I have implemented your example according to my needs
Actually I am replacing combination of letters with suitable hindi word
So far ,
here is the code

HTML Code:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
	const SPACE = 32;
	

	
	function checkKey(e) {
	
		var key = e.keyCode ? e.keyCode : e.charCode;

		if ( key == SPACE ) {
			var text = document.getElementById("t1").value;


				text = text.replace(/ a[^iua]/g, " अ");
			
				text = text.replace(/ aa/g, " आ");
				text = text.replace(/ i/g, " इ");
				text = text.replace(/ I/g, " ई");
				text = text.replace(/ u/g, " उ");
				text = text.replace(/ U/g, " ऊ");
				text = text.replace(/ e/g, " ए");
				text = text.replace(/ ai/g, " ऐ");
				text = text.replace(/ o/g, " ओ");
				text = text.replace(/ au/g, " औ");
				text = text.replace(/M/g, "ं");
				text = text.replace(/H/g, "ः");
				text = text.replace(/k[^Sh]/g, "क");
				text = text.replace(/kh/g, "ख");
				text = text.replace(/g[^hy]/g, "ग");
				text = text.replace(/gh/g, "घ");
				text = text.replace(/~g/g, "ङ");
				text = text.replace(/ch[^h]/g, "च");
				text = text.replace(/chh/g, "छ");
				text = text.replace(/j[^h]/g, "ज");
				text = text.replace(/jh/g, "झ");
				text = text.replace(/~j/g, "ञ"); 
				text = text.replace(/T[^h]/g, "ट");
				text = text.replace(/Th/g, "ठ");
				text = text.replace(/D[^h]/g, "ड");
				text = text.replace(/Dh/g, "ढ");
				text = text.replace(/N/g, "ण");
				text = text.replace(/t[^rh]/g, "त");
				text = text.replace(/th/g, "थ");
				text = text.replace(/d[^h]/g, "द");
				text = text.replace(/dh/g, "ध");
				text = text.replace(/n/g, "न");
				text = text.replace(/p[^h]/g, "प");
				text = text.replace(/ph/g, "फ");
				text = text.replace(/b[^h]/g, "ब");
				text = text.replace(/bh/g, "भ");
				text = text.replace(/m/g, "म");
				text = text.replace(/[^g]y/g, "य");
				text = text.replace(/[^t]r/g, "र");
				text = text.replace(/l/g, "ल");
				text = text.replace(/v/g, "व");
				text = text.replace(/sh/g, "श");
				text = text.replace(/[^k]Sh/g, "ष");
				text = text.replace(/s[^h]/g, "सs");
				text = text.replace(/[^S]h/g, "ह");
				text = text.replace(/kSh/g, "क्ष");
				text = text.replace(/tr/g, "त्र");
				text = text.replace(/gy/g, "ज्ञ");
				text = text.replace(/[k,g,c,j,T,D,N,t,d,n,p,b,m,y,r,l,v,s,h]aa/g, "ा");
				text = text.replace(/[k,g,c,j,T,D,N,t,d,n,p,b,m,y,r,l,v,s,h]i/g, "ि");
				text = text.replace(/[k,g,c,j,T,D,N,t,d,n,p,b,m,y,r,l,v,s,h]I/g, "ी");
				text = text.replace(/[k,g,c,j,T,D,N,t,d,n,p,b,m,y,r,l,v,s,h]u/g, "ु");
				text = text.replace(/[k,g,c,j,T,D,N,t,d,n,p,b,m,y,r,l,v,s,h]U/g, "ू");
				text = text.replace(/[k,g,c,j,T,D,N,t,d,n,p,b,m,y,r,l,v,s,h]e/g, "े");
				text = text.replace(/[k,g,c,j,T,D,N,t,d,n,p,b,m,y,r,l,v,s,h]ai/g, "ै");
				text = text.replace(/[k,g,c,j,T,D,N,t,d,n,p,b,m,y,r,l,v,s,h]o/g, "ो");
				text = text.replace(/[k,g,c,j,T,D,N,t,d,n,p,b,m,y,r,l,v,s,h]au/g, "ौ");

			document.getElementById("t1").value = text;
		}
	}
</script>
</head>
<body>
<label for="t1">Type something</label>
<font size="18pt">
<textarea id="t1" rows="10" cols="45" type="text" name="input" style="overflow:hidden" onkeyup="checkKey(event);"></textarea><br>
</font>
</body>
</html>

Example if I write
vu expecting वु
I notice that it stops at वu
because v has been replaced with व
while ु will come only when it gets 'v' before 'u' which is not present.
Then I changed 's' to 'सs' so that letter 's' till appears after replacement
yet su brings up 'सs '
I was expecting su -> सsu -> सु
Interestingly , sau brings सु
I don't understand why ?

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
We're looking for JavaScript codes / mini tutorials.	JdS	Web Design Forum	10	21-Nov-2011 09:47
An Introduction to Javascript	JasonMichael	Web Design Forum	2	24-Oct-2004 10:19
JavaScript Tutorial Part 1	pcxgamer	Web Design Forum	2	01-Dec-2003 09:16
Javascript: Pop Up Tutorial	BobbyDouglas	Web Design Forum	0	20-Nov-2003 22:19
PHP in HTML	jrobbio	Web Design Forum	4	24-Jul-2003 06:05

Javascript in HTML

Re: Javascript in HTML

Re: Javascript in HTML

Re: Javascript in HTML

Re: Javascript in HTML

Re: Javascript in HTML

Re: Javascript in HTML

Re: Javascript in HTML

Re: Javascript in HTML

Re: Javascript in HTML