How to get emoji from a textarea and search for it in a dictionary/object with Javascript
Question
So I have 2 textareas, 1 holds the user's input, which is expected to hold emoji's, or whitespace. The second one is a read only textarea that holds the output. The purpose of this program is to take in an emoji string and convert it into a regular (text) string using a cipher in the form of a dictionary.
Javascript:
const cipher = {
"👏": "A",
"🥺":"B",
"😩":"C",
"⚡":"D",
"🙃":"E",
"😒":"F",
"🤖":"G",
"👾":"H",
"👊":"I",
"🤡":"J",
"👩🎓":"K",
"🥰":"L",
"🤙":"M",
"👁️":"N",
"🍺":"O",
"🥃":"P",
"🤯":"Q",
"🗿":"R",
"🌭":"S",
"💀":"T",
"🐶":"U",
"📉":"V",
"😐":"W",
"🤓":"X",
"💩":"Y",
"🛹":"Z"
}
function convert(){
var input = document.getElementById("input").value;
var outputTextarea = document.getElementById("output");
var output = "";
console.clear();
for(var i = 0; i < input.length; i++){
var char = input.charAt(i);
if(char in cipher){
output += cipher[char];
}else{
output += char;
}
}
outputTextarea.value = output;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Emoji Custom Cipher</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="label-div"><label for="input">Emoji Input</label><div>
<textarea id="input"></textarea>
<br>
<br>
<button onclick="convert()">Convert</button>
<br>
<br>
<div class="label-div"><label for="output">Text Output</label><div>
<textarea id="output" readonly></textarea>
<script src="script.js"></script>
</body>
</html>
At first I was planning on having it search up the emoji using the char code, but whenever I printed out the char code it printed two things, and I ended up not being able to search it up in the cipher, but when I try to search it up via the char, it doesn't work either.
1 answers
solution1
0 2021-11-04 00:23:10
The way I solved it was storing a string that would contain the character code, and adding the character code / byte from the input string to that every iteration of the loop. Then I looked that up in the dictionary, replacing the emojis, worked like a charm! (along with some sloppy code for resizing the textareas)
Javascript:
const cipher = {
"5535756399": "A",
"5535856698":"B",
"5535756873":"C",
"9889":"D",
"5535756899":"E",
"5535756850":"F",
"5535856598":"G",
"5535756446":"H",
"5535756394":"I",
"5535856609":"J",
"553575642582055535657235":"K",
"5535856688":"L",
"5535856601":"M",
"553575638565039":"N",
"5535657210":"O",
"5535856643":"P",
"5535856623":"Q",
"5535756831":"R",
"5535657133":"S",
"5535756448":"T",
"5535756374":"U",
"5535756521":"V",
"5535756848":"W",
"5535856595":"X",
"5535756489":"Y",
"5535757081":"Z",
"10": "\n",
"32": " "
}
const inputTextarea = document.getElementById("input");
const outputTextarea = document.getElementById("output");
const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
tx[i].addEventListener("input", OnInput, false);
}
function OnInput() {
this.style.height = "auto";
this.style.height = (this.scrollHeight) + "px";
}
function convert(){
var input = inputTextarea.value;
var output = "";
var scanner = "";
console.clear();
for(var i = 0; i < input.length; i++){
var code = input.charAt(i).charCodeAt(0);
scanner += ""+code;
if(scanner in cipher){
output += cipher[scanner];
scanner = "";
}
}
outputTextarea.value = output;
outputTextarea.style.height = "1px";
outputTextarea.style.height = (25+outputTextarea.scrollHeight)+"px";
}
solution2
-1 2021-11-03 01:08:34
const cipher = { "👏": "A", "🥺":"B", "😩":"C", "⚡":"D", "🙃":"E", "😒":"F", "🤖":"G", "👾":"H", "👊":"I", "🤡":"J", "👩🎓":"K", "🥰":"L", "🤙":"M", "👁️":"N", "🍺":"O", "🥃":"P", "🤯":"Q", "🗿":"R", "🌭":"S", "💀":"T", "🐶":"U", "📉":"V", "😐":"W", "🤓":"X", "💩":"Y", "🛹":"Z" } function convert(){ var input = document.getElementById("input").value.split(/([\?-\?][\?-\?])/); var outputTextarea = document.getElementById("output"); var output = ""; console.clear(); for(var i = 0; i < input.length; i++){ //console.log(input[i]); if(input[i] in cipher){ output += cipher[input[i]]; }else{ output += input[i]; } } outputTextarea.value = output; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Emoji Custom Cipher</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="label-div"><label for="input">Emoji Input</label><div> <textarea id="input"></textarea> <br> <br> <button onclick="convert()">Convert</button> <br> <br> <div class="label-div"><label for="output">Text Output</label><div> <textarea id="output" readonly></textarea> <script src="script.js"></script> </body> </html>
I got help from here: How can I split a string containing emoji into an array?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.