Unicode decode doesn't work in change listener on Javascript-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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>