Unicode decode doesn't work in change listener on Javascript

Question

As you will see on the code below, the unicode decoder works on alert but when it comes to textarea listener, it doesn't work as expected, could you catch the problem?

<textarea name="" id="first" cols="75" rows="15"></textarea>
<textarea name="" id="result" cols="75" rows="15"></textarea>

const jsEscape = (str) => {
  return str.replace(new RegExp("'", 'g'),"\\'");
}
const decodeUnicodeEntities = (data) => {
  return unescape(jsEscape(data));
}
alert(decodeUnicodeEntities('http://x.com\u0026shop_id=123'), 'check')
$('#first').on('change keyup paste', function() {
  $('#result').val(decodeUnicodeEntities($(this).val()));
});

Also live pen, https://codepen.io/RainThemes/pen/yLqgdXK

Solved with this, https://stackoverflow.com/a/23937764/10413531

if you run the code you will see it will give you clear url on alert, but if you put the encoded url in first textarea, it not gonna decode onto second textarea as expected, i think it's about `$(this).val()` statement — Luor Themes, Jan 09 '23 at 15:12
In your test case (the `alert()`), the Unicode escape in the string will be turned into "&" *before* your function is ever called; the parser will do that when it parses the string constant. — Pointy, Jan 09 '23 at 15:12
Note that `escape()` and `unescape()` are about URL syntax, not JavaScript string syntax. Escapes in URLs do not look like JavaScript escapes for Unicode. — Pointy, Jan 09 '23 at 15:13
but if I just put the plain string instead of `$(this).val()`, it works expected, how can I fix so — Luor Themes, Jan 09 '23 at 15:15
I don't really understand what you want to do; you have not explained it clearly. If you would edit the question and show the kind of string that would be in the input textarea, and what you would like the output to look like, that might help. — Pointy, Jan 09 '23 at 15:15
try `alert('http://x.com\u0026shop_id=123', 'check')` your method does nothing, the string literal is already "decoded", that's why it's not working on the textareas. — Thomas, Jan 09 '23 at 15:15
well just wanna decode unicodes come from first area into the second textarea but in my case it still gives me same url — Luor Themes, Jan 09 '23 at 15:16
Again, **add example input and output to the question**. It's not clear what you're talking about. — Pointy, Jan 09 '23 at 15:17
I solved with this answer, https://stackoverflow.com/a/23937764/10413531 thanks — Luor Themes, Jan 09 '23 at 15:39

score 0 · Answer 1 · answered Jan 09 '23 at 15:31

Try this code :

<textarea name="" id="first" cols="75" rows="15"></textarea>
<textarea name="" id="result" cols="75" rows="15"></textarea>
const jsEscape = (str) => {
  return str.replace(new RegExp("'", 'g'),"\\'");
}
const decodeUnicodeEntities = (data) => {
  return unescape(jsEscape(data));
}
alert(decodeUnicodeEntities('http://x.com\u0026shop_id=123'), 'check')
$('#first').on('change keyup paste', function() {
  $('#result').val($(this).val());
});

This will ensure that the value of #result is updated whenever the value of #first changes.

Thanks but I tried you can see here, https://codepen.io/RainThemes/pen/yLqgdXK?editors=1111 it gives me same output, just put `http://x.com\u0026shop_id=123` this the first textarea and you will see, output is same — Luor Themes, Jan 09 '23 at 15:35

score 0 · Answer 2 · answered Jan 09 '23 at 15:41

here are all escape sequences defined: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#escape_sequences

they're not that many and fairly straightforward to parse

const decodeUnicodeEntities = (data) => data.replace(
  /(\\[0'"nrvtbf\\])|\\x[0-9a-fA-F]{2}|\\u[0-9a-fA-F]{4}|\\u\{([0-9a-fA-F]{1,6})\}/g,
  (m, a, b) => a ? JSON.parse(`"${a}"`) : String.fromCodePoint(parseInt(b || m.slice(2), 16))
);

$('#first').on('change keyup paste', function() {
  $('#result').val(decodeUnicodeEntities($(this).val()));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="" id="first" cols="75" rows="15">http://x.com\u0026shop_id=123</textarea>
<textarea name="" id="result" cols="75" rows="15"></textarea>

Unicode decode doesn't work in change listener on Javascript

2 Answers2