我怎樣才能縮短這個譯者腳本？

Question

我正在研究一個JavaScript翻譯器，但寫了幾個字之後，我意識到這將花費很長時間，特別是如果我想要做20個以上的單詞。有沒有什麼方法可以縮短這個腳本，這樣我就可以讓用戶輸入更多的單詞，而無需花費太多時間爲超過20個變量添加翻譯過程。
下面的腳本接受文本框的內容，將其分離爲變量，確保沒有變量未定義，並且在將翻譯後的內容放回文本框之前，對每個單詞進行單獨的翻譯過程。我沒有包含HTML，因爲它不重要。
所以，我的問題是，我怎樣才能縮短這個腳本，以便能夠翻譯更多的詞彙，而不用我的餘生這麼做。

/* The Translator */ 

function myFunction() { //yeah I gotta use funtion myFunction... I lack creativity 
var x = document.getElementById("translateinput").value; 


//splitting the string into variables 
var w1 = x.split(" ")[0]; 
var w2 = x.split(" ")[1]; 
var w3 = x.split(" ")[2]; 
var w4 = x.split(" ")[3]; 
var w5 = x.split(" ")[4]; 
var w6 = x.split(" ")[5]; 
var w7 = x.split(" ")[6]; 
var w8 = x.split(" ")[7]; 
var w9 = x.split(" ")[8]; 
var w10 = x.split(" ")[9]; 
var w11 = x.split(" ")[10]; 
var w12 = x.split(" ")[11]; 
var w13 = x.split(" ")[12]; 
var w14 = x.split(" ")[13]; 
var w15 = x.split(" ")[14]; 
var w16 = x.split(" ")[15]; 
var w17 = x.split(" ")[16]; 
var w18 = x.split(" ")[17]; 
var w19 = x.split(" ")[18]; 
var w20 = x.split(" ")[19]; 

//making sure nothing is undefined in case the string is less than 20 words 
if (typeof w1 == "undefined") { 
w1 = "" 
    } 
if (typeof w2 == "undefined") { 
     w2 = "" 
} 
if (typeof w3 == "undefined") { 
    w3 = "" 
} 
if (typeof w4 == "undefined") { 
    w4 = "" 
} 
if (typeof w5 == "undefined") { 
    w5 = "" 
} 
if (typeof w6 == "undefined") { 
    w6 = "" 
} 
if (typeof w7 == "undefined") { 
    w7 = "" 
} 
if (typeof w8 == "undefined") { 
    w8 = "" 
} 
if (typeof w9 == "undefined") { 
    w9 = "" 
} 
if (typeof w10 == "undefined") { 
    w10 = "" 
} 
if (typeof w11 == "undefined") { 
    w11 = "" 
} 
if (typeof w12 == "undefined") { 
    w12 = "" 
} 
if (typeof w13 == "undefined") { 
    w13 = "" 
} 
if (typeof w14 == "undefined") { 
    w14 = "" 
} 
if (typeof w15 == "undefined") { 
    w15 = "" 
} 
if (typeof w16 == "undefined") { 
    w16 = "" 
} 
if (typeof w17 == "undefined") { 
    w17 = "" 
} 
if (typeof w18 == "undefined") { 
    w18 = "" 
} 
if (typeof w19 == "undefined") { 
    w19 = "" 
} 
if (typeof w20 == "undefined") { 
    w20 = "" 
} 

//The translation process 
if (w1 === "word1") 
{ 
    var w1 = "word2" 
} 
if (w2 === "word1") 
{ 
    var w2 = "word2" 
} 
if (w3 === "word1") 
{ 
    var w3 = "word2" 
} 
if (w4 === "word1") 
{ 
    var w4 = "word2" 
} 
if (w5 === "word1") 
{ 
    var w5 = "word2" 
} 
if (w6 === "word1") 
{ 
    var w6 = "word2" 
} 
if (w6 === "word1") 
{ 
    var w6 = "word2" 
} 
if (w7 === "word1") 
{ 
    var w7 = "word2" 
} 
if (w8 === "word1") 
{ 
    var w8 = "word2" 
} 
if (w9 === "word1") 
    { 
    var w9 = "word2" 
} 
if (w10 === "word1") 
{ 
    var w10 = "word2" 
} 
if (w11 === "word1") 
{ 
    var w11 = "word2" 
} 
if (w12 === "word1") 
{ 
    var w12 = "word2" 
} 
if (w13 === "word1") 
{ 
    var w13 = "word2" 
} 
if (w14 === "word1") 
{ 
    var w14 = "word2" 
} 
if (w15 === "word1") 
{ 
    var w15 = "word2" 
} 
if (w16 === "word1") 
{ 
    var w16 = "word2" 
} 
if (w17 === "word1") 
{ 
    var w17 = "word2" 
    } 
    if (w18 === "word1") 
{ 
    var w18 = "word2" 
} 
if (w19 === "word1") 
{ 
    var w19 = "word2" 
    } 
if (w20 === "word1") 
{ 
    var w20 = "word2" 
} 


//resulting translated string 
var result = w1 + " " + w2 + " " + w3 + " " + w4 + " " + w5 + " " + w6 + " " + w7 + " " + w8 + " " + w9 + " " + w10 + " " + w11 + " " + w12 + " " + w13 + " " + w14 + " " + w15 + " " + w16 + " " + w17 + " " + w18 + " " + w19 + " " + w20 


//places final result back into text box 
    document.getElementById("translateinput").value = result; 
} 

Answer 1

如果你想更換一個字中出現的所有另一個字一個字符串，你可以使用內置的與string.replace（）函數：

x.replace('word1', 'word2') // replaces only one occurrence  
x.replace(/word1/gi, 'word2'); // replaces all occurrences (needs a regular expression) 

如果您需要做別的事情與分裂的話，那麼你就可以遍歷數組：

var words = x.split(" "); 
for (var w in words) { 
    console.log(words[w]); 
    // do other stuff with the word here. 
} 

更多信息，請參見Mozilla docs。

Answer 2

您可以在JavaScript中讀到陣列和理解循環使用

這裏是你可以做的功能

1. 的變化保持轉換映射在一個js對象

   trans_obj = {「word1」：「word11」，「word2」：「word22」}

2. 而不是空間拆分文本和存儲在不同的變量喲U可以只使用數組作爲這樣

3. 使用地圖數組的每個元素翻譯並加入陣列後

Implementaion

function translate(str) { 
 
    var tr = { 
 
    word1: "word11", 
 
    word2: "word22", 
 
    word3: "word33", 
 
    hello: "holla" 
 
    }; 
 
    var str_list = str.split(/\s/); 
 
    for (var i = 0; i < str_list.length; i++) { 
 
    str_list[i] = tr[str_list[i]] || str_list[i]; 
 
    } 
 
    return str_list.join(" "); 
 
} 
 

 
console.log(translate("word1 is neither word2 nor word3")); 
 
console.log(translate("hello world1"));

你可能使用正則表達式也是一樣的，這裏是一個正則表達式im plementation

正則表達式實現

function translate(str) { 
 
    var mapObj = { 
 
    word1: "word11", 
 
    word2: "word22", 
 
    word3: "word33", 
 
    hello: "holla" 
 
    }; 
 

 
    var re = new RegExp(Object.keys(mapObj).join("|"), "gi"); 
 

 
    return str.replace(re, function(matched) { 
 
    return mapObj[matched.toLowerCase()]; 
 
    }); 
 
} 
 

 

 
console.log(translate("word1 is neither word2 nor word3")); 
 
console.log(translate("hello world1"));