为什么我的smiley解析代码调用本机javascript函数？

我正在为我的网站编写一个smiley解析函数。我试图实现的是将某些字符串（例如，

“：）”

转换为如下图像：

或者以下是实际的html示例：

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

这将导致浏览器控制台中出现404 not found错误

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){

另外，由于您没有使用

smilies

作为数组，因此我同意Pointy的意见，即应该将其声明为对象。值得一提的是，在JavaScript中将键附加到

数组

时，它们仅在以下情况下才被视为数组索引

var smilies={}//新对象（）的缩写；
微笑[“：）”]=“smile.png”；
微笑[“：D”]=“微笑大.png”；
笑脸[“：p”]=“telge.png”；
微笑[“[绵羊]”]=“sheep.png”；
smilies[“不要使用
数组
并像对象一样访问它。使用对象。您看到的是使用对象访问语法访问数组方法的行为。您应该只使用数字键访问数组

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

……等等

您应该能够保持代码的其余部分不变。
是的，您是对的，您的代码应该是：

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

或

我只想：

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="" />';
    });
}

函数解析新注释（commentElem）{
html（解析注释（commentElem.text（））；
}
函数parse_comment（comment）{
return comment.replace（/（\：\）\：D |\：p | \[sheep\]\我将使用一个动态创建正则表达式的实现（这也可能快得多）：

您应该像这样声明“smilies:
var smilies={}；
因为您没有将其用作数组。您不应该为此使用
数组。
。映射（关联数组、哈希表、字典，无论您想叫它什么）都可以，遗憾的是Javascript将其与对象混淆，因此对象（
{}
）必须这样做。请注意，这并不能解决实际问题，尽管它可能会解决其他潜在问题。这个答案仍然很有价值，因为即使使用对象，他的代码也会试图找到“toString”笑脸图像：-）@JanDvorak仍然不能完全解决这个问题。
toString
和其他对象原型方法将被包括在内，
typeofa[key]==”字符串呢"
？这不像
对象继承任何字符串：-）我实际上有一个后续问题。如果@JoelMurphy使用正则表达式和
替换
，效率会更高吗？这不是完全可以避免这个问题吗？@Rikonator我正在寻找修复OP的代码，可以使用正则表达式来解决这个问题，h不过，对于不熟悉正则表达式的人来说，这可能会让人困惑。至于速度，我真的不确定。为您的编码方法创建一个perf+1可能相对简单。我对正则表达式不是很有经验，因为我发现很难记住每件事的作用。我肯定会将此函数保留在m中对于未来，当我开发完我的网站后，我希望做一些进一步的代码改进，我喜欢这段代码有多干净。对于不同的方法+1，值得注意的是，您可以通过转义和.join（“）|（”）调用smilies的Object.key来动态创建RegExp。
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";

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

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

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

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="" />';
    });
}

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);

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