用对象文字字典中的单词替换所有出现的单词

Question

我有一个关于访问 JavaScript 对象的各个部分的问题。

var dictionary = {
   "gimme": "༼ つ ◕_◕ ༽つ",
   "umadbro": "¯\_(ツ)_/¯",
   "lenny": "( ͡° ͜ʖ ͡°)"
}

所以我正在制作一个程序，当您输入相应的名称（gimme、umadbro、lenny 等）时，它会打印实际的 ascii/Uni 艺术，但是我不确定如何去做。这是我到目前为止的代码：

function checkCharacter() {
  //Assign $ascii_box variable to ascii-box element
  var $ascii_box = document.getElementById("ascii-box");

//Update value of $ascii_box_value everytime the text field changes
  $ascii_box.on("input", function() {
  var $ascii_box_value = $ascii_box.val();
});

//Check if value in text box is equal to a name in the dictionary object
  //If equal, print the emote to the screen
  if ($ascii_box_value === dictionary) {
 }
}

我如何能够访问字典中的单词并在文本框中输入时将它们打印为表情？提前感谢您的帮助！

Answer 1

继续打字，玩得开心；）

var dictionary = {
    "gimme": "༼ つ ◕_◕ ༽つ",
    "umadbro": "¯\\_(ツ)_/¯",
    "lenny": "( ͡° ͜ʖ ͡°)"
};

var re = new RegExp( Object.keys(dictionary).join("|"), "ig");  // /gimme|umabro|lenny/ig

$("#ascii-box").on("input", function() {
    $(this).val(function(i, v){                 // Let's modify val directly:
        return v.replace(re, function(m) {      // returning a replace of it's value against our regex /gimme|umabro|lenny/ig
            return dictionary[m.toLowerCase()]; // by the lowercase match
        });
    });
}).trigger("input"); // Trigger is just for DEMO

textarea{width:100%; height:200px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="ascii-box">Gimme Something that you like or gimme just a Lenny please. Enter some text...</textarea>

感谢toLowerCase()，你可以看到你也可以输入Lenny大写，它仍然会被转换成( ͡° ͜ʖ ͡°)

Answer 2

$ascii_box_value === dictionary

这会将文本框的值与dictionary 本身进行比较。你需要的是：

dictionary.hasOwnProperty($ascii_box_value)

查看键是否包含在字典中。然后就可以使用了

dictionary[$ascii_box_value]

检索值。这称为方括号表示法。您可以使用它通过未硬编码的字符串获取属性。否则，您也可以使用点表示法。

例子：

dictionary["lenny"]; // returns "( ͡° ͜ʖ ͡°)"

dictionary.umadbro; // returns "¯\_(ツ)_/¯"

var value="gimme";
dictionary[value]; // returns "༼ つ ◕_◕ ༽つ"

完成您的if 声明：

//Check if value in text box is equal to a name in the dictionary object
//If equal, print the emote to the screen
if (dictionary.hasOwnProperty($ascii_box_value)) {
  document.write(dictionary[$ascii_box_value]);
}

不确定你想在哪里打印它，但这就是你检索值的方式。

Answer 3

执行此操作的快速方法可能是：

$ascii_box.on("input", function() {
    var input = $ascii_box.val();
    var emote = dictionary[input];

    if (emote) {
        //print emote to screen?
        $(body).append(emote);
    }
});

Answer 4

只需检查与字典中的键关联的值是否未定义，如果不是，则在某处打印该值。或者以某种方式使用它。

var dictionary = {
   "gimme": "༼ つ ◕_◕ ༽つ",
   "umadbro": "¯\_(ツ)_/¯",
   "lenny": "( ͡° ͜ʖ ͡°)"
};

$('#ascii_box').on("input", function() { 
  //check if dictionary value is not undefined
  if(dictionary[this.value] != [][0])
    //print value somewhere
    print(this.value);
  else clear();
});
function print(str){
 $("#display").text(dictionary[str]);  
}
function clear(){
 $("#display").text("");  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input id="ascii_box" /></div>
<div id="display"></div>

Answer 5

似乎有几个人在我之前得到了答案，但这里有一个简单的 jsfiddle 可以帮助您进一步了解发生了什么。

var dictionary = {
"gimme": "༼ つ ◕_◕ ༽つ",
"umadbro": "¯\_(ツ)_/¯",
"lenny": "( ͡° ͜ʖ ͡°)"
}

// use jquery to select the dom element
var $ascii_input = $("#ascii-input");

//get dictionary value when input value is entered.
$ascii_input.change(function () {
// grab whatever text is in the input field
var $ascii_input_text = $("#ascii-input").val();

// grab value based on the on the key provided and display.
$(".ascii-output").html(dictionary[$ascii_input_text]);
console.log(dictionary[$ascii_input_text]);
});

https://jsfiddle.net/mannyyang/pffpeb8x/1/