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

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

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

- Jelani Thompson

---

use square brackets. - Daniel A. White

你同时混用jQuery和标准DOM API。 - Daniel A. White

谢谢，我会的！你能详细说明一下它如何使值更容易访问/修改吗？顺便说一下，这是一个CodePen项目。 - Jelani Thompson

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，它也会被转换成小写的 ( ͡° ͜ʖ ͡°)

- Roko C. Buljan

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

不确定你想要在哪里打印，但这是获取值的方法。

- Sebastian Simon

Answer 3

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

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>

- Travis J

Answer 4

一个快速的方法是：

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

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

- Reda

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/

- Manuel Yang