Hello,
I’m eager for an answer to this issue, so I’m afraid I’ve skipped the Introductions forum. (I hope I haven’t stepped on any toes by doing so!)
My Program
I’m working on a website that uses the Devanagari writing system (i.e. देवनागरी) extensively. Realizing that not everybody can read this font, I decided to write a transliterator for my site. When the value of a ‘select’ menu changes, all of the Devanagari is replaced with another writing system (I’ll using “writing system” to avoid confusion with “script”).
The Implementation
I select all of the text in the body of the document with document.body.innerHTML and iterate through it character by character.
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<p>संस्कृत</p>
<label>Dummy menu</label>
<select>
<option>Apples</option>
<option>Broccoli</option>
<option>Cereal</option>
</select>
<label>Script:</label>
<select onchange="Transliterate( this )">
<option>Default</option>
<option value="s1">Script 1</option>
<option value="s2">Script 2</option>
</select>
</body>
</html>
var backup = false;
var OLD;
var writingSystem1 = new Array(
"अ", "आ", "इ", "ई", "उ", "ऊ",
"ऋ", "ॠ", "ए", "ऐ", "ओ", "औ",
"ा", "ि", "ी", "ु", "ू", "ृ", "ॄ",
"े", "ै", "ो", "ौ", "ं", "ः", "्",
"क", "ख", "ग", "घ", "ङ",
"च", "छ", "ज", "झ", "ञ",
"ट", "ठ", "ड", "ढ", "ण",
"त", "थ", "द", "ध", "न",
"प", "फ", "ब", "भ", "म",
"य", "र", "ल", "व",
"श", "ष", "स", "ह",
"ॐ", "ऽ"
);
var writingSystem2 = new Array(
"ಅ", "ಆ", "ಇ", "ಈ", "ಉ", "ಊ",
"ಋ", "ೠ", "ಎ", "ಐ", "ಒ", "ಔ",
"ಾ", "ಿ", "ೀ", "ು", "ೂ", "ೃ", "ೄ",
"ೆ", "ೈ", "ೊ", "ೌ", "ಂ", "ಃ", "್",
"ಕ", "ಖ", "ಗ", "ಘ", "ಙ",
"ಚ", "ಛ", "ಜ", "ಝ", "ಞ",
"ಟ", "ಠ", "ಡ", "ಢ", "ಣ",
"ತ", "ಥ", "ದ", "ಧ", "ನ",
"ಪ", "ಫ", "ಬ", "ಭ", "ಮ",
"ಯ", "ರ", "ಲ", "ವ",
"ಶ", "ಷ", "ಸ", "ಹ",
"ಓಂ", "ಽ"
);
var toScriptTwo = {};
for (var i = 0; i < writingSystem1.length; i++) {
toScriptTwo[writingSystem1[i]] = writingSystem2[i];
}
function setBackup() {
backup = true;
OLD = document.body.innerHTML;
}
function Swap(map) {
if (!backup) setBackup();
var newHTML = "";
for (var i = 0, oldL; oldL = OLD[i]; i++) {
if (map.hasOwnProperty(oldL)) {
newHTML += map[oldL];
} else {
newHTML += oldL;
}
}
return newHTML;
}
function Transliterate(elem) {
var value = elem.options[elem.selectedIndex].value;
if (value == "s1") {
document.body.innerHTML = Swap(toScriptTwo);
}
else if (backup && value == "s2") {
document.body.innerHTML = OLD;
}
}
The Problem
The writing system gets changed correctly; that’s not the issue. The issue is that all of the forms on the page are reset to their default value.
While looking for an answer, I came to understand that this is how innerHTML always works: all forms and fields are reset, since it does a “dumb replace” of these features and ignores their content. Many sites suggested that I use more standard DOM-related functions.
But my problem with these functions is that they focus exclusively on elements and their hierarchy, whereas I just want to iterate through the text and transliterate. More explicitly: other users seemed to have problems with creating or inserting elements, but I want to do neither, so I don’t know if a DOM-related approach is best.
Moreover, I want this function to be fast. Right now, it can transliterate 200 lines of Devanagari in about half a second.
My Question
Is there a reasonable way to (1) transliterate quickly and (2) retain all form data?
Thanks for reading!