Javascript：无法在div标签上加载图像资源

Question

任何人都可以告诉我如何在div标签上查看实际图像资源：

这是完整的脚本：

var smileys = [];
smileys[":)"] = "happy.png";
smileys[":D"] = "laugh.png";
smileys[":3"] = "meow.png";
smileys[":{"] = "must.png";
smileys[":V"] = "pac.png";
smileys[":("] = "sad.png";
smileys[":O"] = "surprised.png";
smileys[":?"] = "wat.png";

function RegExpEscape(str) {
  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}

function replaceEmoticons(str) {
  for (var key in smileys) {
    var re = new RegExp("(?:^|\\s)" + RegExpEscape(key) + "(?=$|\\s)", 'g');
    var str2 = "<img src='images/smileys/" + smileys[key] + "'/>";
    //alert(re);
    //alert(str2);
    var inputName = document.getElementById("input");
    alert(inputName);
    str = str.html().replace(re, str2);
  }
  return (str);
}

var delay = (function() {
  var timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();

update();

function update() {
  $('#result').text(replaceEmoticons($('#input').val()));
}

$('#input').keyup(function() {
  delay(update, 250);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h4>Input :</h4>

<textarea id="input">
  Hello how are you all doing today? :)
</textarea>

<hr>
<h4>Result :</h4>

<div id="result">
</div>

当我检查元素时，控制台上没有发现错误！ 请帮助！

Answer 1

请注意，javascript代码在加载DOM之前正在执行。加载页面时，加载代码后执行并且#input尚不存在。把它放在$（document）.ready或onload事件中。

 $(document).ready(function() {

      //your stuff

 });

修改

看到那个小提琴：https://jsfiddle.net/aoaugpaf/

Answer 2

在此功能中：

 function replaceEmoticons(str) {
        for (var key in smileys) {
            var re = new RegExp("(?:^|\\s)" + RegExpEscape(key) + "(?=$|\\s)", 'g');
            var str2 = "<img src='images/smileys/" + smileys[key] + "'/>";
            //alert(re);
            //alert(str2);
            var inputName = document.getElementById("input");
            alert(inputName);
            str = str.html().replace(re, str2);
        }
        return (str);
    }

str没有html()方法，因为它是您在此处写的输入值：

 $('#result').text(replaceEmoticons($('#input').val()));

只需删除html()方法即可，一切正常。

Here's我为你做的小提琴。

Answer 3

因为$（）。val（）返回String而字符串没有方法.html（）

编辑功能replaceEmoticons：

 str = str.replace(re, str2);

有效：http://jsfiddle.net/au419fkh/