爲什麼我的笑臉解析代碼調用原生javascript函數？

Question

我正在爲我的網站寫一個笑臉解析函數。我試圖完成的是轉換某些字符串，例如":)"成這樣一個形象：

還是這裏的實際的HTML爲例：

":)" ===> <img src="images/smilies/smile.png" /> 

我的功能是什麼它的意思做的，但它也解析本地JavaScript函數名！什麼意思呢，就是如果我鍵入包含字符串"push"，"pop"，或"some"（有可能加載等）我的函數將解析這些字符串爲無效相似圖片評論：

這裏是一個html字符串顯示此：

<img src="images/smilies/function some() { [native code] }" alt=""> 

這會導致瀏覽器控制檯中404未找到錯誤。

Failed to load resource: the server responded with a status of 404 (Not Found) 

這是怎麼發生的？我不這樣做在我的代碼什麼太不尋常，因爲你可以在這裏看到：

 function parse_new_comment(commentElem){ 
      $(commentElem).html(parse_comment($(commentElem).text())); 
     } 


     function parse_comment(comment){ 
      var formatted_comment = ""; 

      var smilies = new Array(); 
      smilies[":)"] = "smile.png"; 
      smilies[":D"] = "smile-big.png"; 
      smilies[":p"] = "tongue.png"; 
      smilies["[sheep]"] = "sheep.png"; 
      smilies["<3"] = "love.png"; 
      smilies["[love]"] = "love.png"; 

      var words = comment.split(" "); 

      for (var i = 0; i < words.length; i++) { 
       if(smilies[words[i]] !== undefined){ 
        formatted_comment += ' <img src="images/smilies/'+smilies[words[i]]+'" alt="" />'; 
       }else{ 
        formatted_comment += ' ' + words[i]; 
       } 
      } 
      return formatted_comment; 
     } 

我有一種感覺，這行代碼是導致該問題if(smilies[words[i]] !== undefined){，爲push和pop是陣列功能，我米不太確定，但我會很感激，如果有人可以提出任何想法，爲什麼我的功能失敗。

哦，我忘了提，我的網頁使用AJAX做的一切，所以新的評論通過調用這樣的函數解析：

parse_new_comment($("#comment_343")); 

謝謝。

Answer 1

檢查對象是否具有屬性本身，而不是對象的屬性未定義。這可以使用hasOwnProperty完成。

if(smilies.hasOwnProperty(words[i])){ 

而不是

if(smilies[words[i]] !== undefined){ 

另外，由於不使用smilies作爲一個數組我尖尖的評論都認爲它應該被聲明爲一個對象。值得一提的是，當您在JavaScript中將鍵附加到Array時，它們僅在they can be seen as unsigned integers時才被視爲數組索引。

var smilies = {};//short for new Object(); 
smilies[":)"] = "smile.png"; 
smilies[":D"] = "smile-big.png"; 
smilies[":p"] = "tongue.png"; 
smilies["[sheep]"] = "sheep.png"; 
smilies["<3"] = "love.png"; 
smilies["[love]"] = "love.png"; 

您可能會對Explosion Pills建議的答案建議的字面語法感興趣。只是爲了澄清，仍然需要使用hasOwnProperty。

Answer 2

請勿使用Array並以對象的形式訪問它。使用一個對象。你所看到的是使用對象訪問語法訪問Array方法的行爲。您應該只使用數字鍵訪問數組。

var smilies = { 
    ":)": "smile.png", 
    ":D": "smile-big.png", 
}; 

...等等。

你應該能夠保持你的代碼的其餘部分相同。

Answer 3

是的，你是對的，你的代碼應該變成：

if(smilies[words[i]] !== undefined && (typeof smilies[words[i]]) == 'string'){ 

或

if(words[i] in smilies && (typeof smilies[words[i]]) == 'string'){ 

Answer 4

我只是做：

function parse_new_comment(commentElem) { 
    commentElem.html(parse_comment(commentElem.text())); 
} 

function parse_comment(comment) { 
    return comment.replace(/(\:\)|\:D|\:p|\[sheep\]|\<3|\[love\])/gi, function (match) { 
     var smilies = { 
       ":)": "smile.png", 
       ":D": "smile-big.png", 
       ":p": "tongue.png", 
       "[sheep]": "sheep.png", 
       "<3": "love.png", 
       "[love]": "love.png" 
     } 
     return '<img src="images/smilies/' + smilies[match] + '" alt="" />'; 
    }); 
} 

FIDDLE

Answer 5

我會用一個實現它動態地創建一個正則表達式（這也可能要快很多）：

RegExp.escape = function(text) { 
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); 
}; 

function SmileyParser(smiles) { 
    var smilepatterns = [], k; 
    for (k in smiles) { 
     if (smiles.hasOwnProperty(k)) { 
      smilepatterns.push(RegExp.escape(k)); 
     } 
    } 
    this.smiles = smiles; 
    this.re_smiles = RegExp("(^|\\s)("+smilepatterns.join("|")+")($|\\s)", 'g'); 
} 
SmileyParser.prototype.replace = function (text) { 
    var smiles = this.smiles; 
    function replacer(m, p1, p2, p3) { 
     console.log(m); 
     return p1 
     +"<img src='/images/smiles/"+smiles[p2]+"'>" 
     +p3; 
    } 
    return text.replace(this.re_smiles, replacer); 
}; 

然後，使用這樣的：

var smiles = { 
       ":)": "smile.png", 
       ":D": "smile-big.png", 
       ":p": "tongue.png", 
       "[sheep]": "sheep.png", 
       "<3": "love.png", 
       "[love]": "love.png" 
     }; 

var sp = new SmileyParser(smiles); 
var text = 'This comment parses my smiley fine :)'; 
var newtext = sp.replace(text); 

newtext將是：

This comment parses my smiley fine <img src='/images/smiles/smile.png'>