Как заставить JavaScript обрабатывать символ «ESCAPE (\ u001B)»?

Question

Я хочу создать веб-сайт, который генерирует код для командной строки Windows 10, который поддерживает символ 'ESCAPE' (\ u001B) для строки стиля.
Примеры можно увидеть на ЗДЕСЬ .

ПРИМЕЧАНИЕ. Поскольку этот сайт не может правильно отображать `` (\ u001B), я буду использовать ←.

Проблема заключается в том, что когда я пытался создать код, создающий коддля командной строки так:

function cdGenerate() {
  var input = document.getElementById('ipText').value;

  console.log(`input: ${input}`);

  input = checkStyle(input);
  console.log(`checkStyle input : ${input}`);
  input = checkForeground(input);
  console.log(`checkForeground input : ${input}`);
  input = checkBackground(input);
  console.log(`checkBackground input : ${input}`);

  str = input;

  console.log(`str: ${str}`);

  document.getElementById('spResult').innerHTML = `<code>${str}</code>`;
  copy(str);
}
function checkStyle(ori) {
  var rtb = '←[';

  if (document.getElementById('g-style-reset').checked) { rtb += '0;' }
  if (document.getElementById('g-style-bold').checked) { rtb += '1;' }
  if (document.getElementById('g-style-underline').checked) { rtb += '4;' }
  if (document.getElementById('g-style-inverse').checked) { rtb += '7;' }

  rtb = rtb.slice(0, -1);
  rtb += 'm';

  var rtn = rtb.concat(ori);
  return rtn;
}

Результат не тот, который я хотел.

Я ввел TEST в ipText элемент ввода HTML и выполнил cdGenerate(), чтоЯ должен получить ←[7mTEST как вещь в ipResult элемент ввода HTML. Но я могу получить только TEST, а не ←[7mTEST.

Я проверил эти коды с ← вместо \u001B и ничего не изменилось.

Кроме того, мне нужноскопируйте эти ←[7mTEST в буфер обмена пользователя.

Как мне сделать мой код JavaScript для правильной обработки ← (\ u001B) (как есть)?

Answer 1

OK. Я нашел, как это сделать.

1. Мне нужно показать символ 'ESCAPE', я решил вместо этого показать ←. И добавил комментарий к <input> «НЕ КОПИРУЙТЕ ЭТОТ ТЕКСТ» как вещь. Все внутренние функции используют ← вместо «ESCAPE», потому что он мне нужен только при копировании в буфер обмена.
2. Мне нужно скопировать символ 'ESCAPE'. После копирования строки в <input>, та же самая переменная используется при преобразовании ← в 'ESCAPE'. И я использовал скрытый <div>, чтобы вставить строку (включая «ESCAPE») и скопировать ее в буфер обмена. Если используется <input>, символ 'ESCAPE' не копируется должным образом, поэтому я использовал <div>. В любом случае, содержимое <div> очищается после его копирования в буфер обмена.

function copyToClipboard(string) {
  $id('hide').innerHTML = string;
  var temp = document.createElement('input');
  document.body.appendChild(temp);
  temp.setAttribute('value', string);
  temp.select();
  document.execCommand('copy');
  document.body.removeChild(temp);
}

Я надеюсь, что мой обходной путь поможет другим людям, страдающим той же проблемой.

Answer 2

Вы должны преобразовать символы управления ascii во что-то читаемое, я полагаю. Что-то вроде:

const convert2Readable = (() => {
  const converts = {
      0x001b: 8592,
      27: 8592,
  };
  return code => {
      code = code && code in converts && converts[code] || 0x1F61E;
      return String.fromCodePoint(code);
  };
})();

document.querySelector("#result").innerHTML = `${convert2Readable(0x1b)}[TEST`;
document.querySelector("#result").innerHTML += `<br>${convert2Readable(0x20)}[TEST`;

#result {
  font-family: courier;
  font-weight: bold;
  font-size: 1.5rem;
}

<div id="result"></div>

Если вы записываете вывод convert2Readable(0x1b) в окно cmd, результат можно скопировать и вставить. Смотрите скриншот.

Если вы имеете в виду: «Я хочу скопировать / вставить фактический символ (<ESC>)»: вы не можете сделать это, насколько мне известно.