TypeScript获取输入框特殊字符修剪前的值及jQuery替换方案咨询

咱们先拆解你的问题，分成两个部分来解决：一是获取特殊字符被浏览器处理前的原始文本，二是把这些特殊字符替换成对应的文本描述再放回输入框。

一、获取特殊字符未被修剪的原始值 #

这里得区分输入框的类型，因为不同类型的输入框对特殊字符的处理逻辑不一样：

1. 如果你用的是 <textarea> #

这就简单了！textarea会完整保留用户输入的所有内容，包括\n、\t这些特殊字符，直接用jQuery的.val()就能拿到原始值：

const originalContent = $('#myTextarea').val() as string;

2. 如果你用的是普通 <input type="text"> #

这里要注意：浏览器会自动把输入的换行、制表符这类空白字符替换成单个空格，直接.val()拿到的是已经被处理后的结果。如果想要拿到用户输入的原始内容（包括那些被替换的特殊字符），就得通过监听键盘和粘贴事件手动记录：

// 先声明一个变量存原始输入内容
let rawInputContent = '';

// 监听键盘按键事件
$('#myInput').on('keydown', function(e) {
  const pressedKey = e.key;
  switch(pressedKey) {
    case 'Enter':
      rawInputContent += '\n';
      e.preventDefault(); // 阻止input默认的换行行为（毕竟input本身不支持换行）
      break;
    case 'Tab':
      rawInputContent += '\t';
      e.preventDefault(); // 阻止默认的焦点切换
      break;
    default:
      rawInputContent += pressedKey;
  }
});

// 还要处理粘贴的情况，避免漏掉粘贴进来的特殊字符
$('#myInput').on('paste', function(e) {
  const clipboard = e.originalEvent?.clipboardData || window.clipboardData;
  const pastedText = clipboard?.getData('text') || '';
  rawInputContent += pastedText;
  e.preventDefault(); // 阻止浏览器自动处理粘贴的内容
});

// 之后需要原始值的时候，直接用rawInputContent就行

不过这种方法有个小局限：如果用户通过右键菜单的“剪切/复制”之外的方式修改内容（比如浏览器的自动填充），可能会漏掉部分内容，所以如果你的场景允许，优先用textarea会更省心。

二、替换特殊字符为文本描述并重置输入框 #

拿到原始内容后，用正则表达式就能轻松替换对应的特殊字符。写个通用的替换函数，之后直接调用就行：

function convertSpecialCharsToText(text: string): string {
  return text
    .replace(/\n/g, ' newline ') // 全局替换所有换行符为"newline"
    .replace(/\t/g, ' tab ')     // 全局替换所有制表符为"tab"
    .replace(/\r/g, ' carriage return '); // 可选：处理回车符
}

// 实际使用示例
const $targetInput = $('#myInputOrTextarea');
const originalValue = $targetInput.val() as string;
const convertedValue = convertSpecialCharsToText(originalValue);
$targetInput.val(convertedValue);

给描述文本前后加空格是为了避免和原有内容连在一起，比如原文本是hello\nworld，替换后会变成hello newline world，可读性会好很多。如果不需要空格，直接去掉就行。

另外提醒一句：如果是在表单提交前做这个替换，最好保留一份原始值的副本，避免后续需要用到用户的原始输入时找不到。

内容的提问来源于stack exchange，提问作者Zabih Khaliqi