3

私は自分のウェブサイトのスマイリー解析関数を書いています。私が達成しようとしているのは、特定の文字列を":)"次のような画像に変換することです。ここに画像の説明を入力

または、例として実際の html を次に示します。

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

私の関数は本来の目的を果たしますが、ネイティブの JavaScript 関数名も解析しています! "push"これが意味することは、文字列、"pop"、または"some"(おそらく他の負荷がある)を含むコメントを入力すると、関数はこれらの文字列を次のような無効な画像に解析するということです。

ここに画像の説明を入力

これを示す html 文字列を次に示します。

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

これにより、ブラウザ コンソールに 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){コードのこの行が問題を引き起こしていると感じています.pushとpopは配列関数であるため、よくわかりません.関数が失敗する理由について何かアイデアを提案していただければ幸いです.

言い忘れていましたが、私のページは ajax を使用してすべてを実行しているため、新しいコメントは次のように関数を呼び出すことで解析されます。

parse_new_comment($("#comment_343"));

ありがとうございました。

4

5 に答える 5

7

オブジェクトのプロパティが定義されていないことではなく、オブジェクト自体がプロパティを持っていることを確認してください。これは、 を使用して実行できますhasOwnProperty。

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

それ以外の

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

また、smilies配列として使用していないため、オブジェクトとして宣言する必要があるという Pointy のコメントに同意します。JavaScript で にキーをアタッチする場合、キーが符号なし整数と見なされるArray場合にのみ、配列インデックスと見なされることに注意してください。

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はまだ必要です。

于 2013-03-30T17:29:18.457 に答える
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="" />';
    });
}

フィドル

于 2013-03-30T17:39:50.500 に答える
2

を使用せずArray、オブジェクトのようにアクセスしてください。オブジェクトを使用します。表示されているのは、オブジェクト アクセス構文を使用して Array メソッドにアクセスしたときの動作です。配列にアクセスするには、数値キーのみを使用してください。

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

...等々。

コードの残りの部分を同じに保つことができるはずです。

于 2013-03-30T17:30:37.693 に答える
2

正規表現を動的に作成する実装を使用します (これもはるかに高速になる可能性があります)。

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'>
于 2013-03-30T18:04:01.643 に答える
1

はい、あなたのコードは次のようになります。

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

また

if(words[i] in smilies && (typeof smilies[words[i]]) == 'string'){
于 2013-03-30T17:34:03.207 に答える