在HTML中是否可将字符伪装为空白？如何将下划线(_)转换为空白？

可以实现将下划线伪装显示为空白的效果，根据是否需要保留原始值的复制、提交行为，可选以下几种方案：

方案1：CSS font-face 字形映射（推荐，支持input元素，原始值不受影响） #

原理是仅针对下划线的Unicode编码做字体样式调整，不影响其他字符展示，用户提交表单、复制内容时仍然会保留原始下划线，仅肉眼显示为空白：

@font-face {
  font-family: 'hideUnderscore';
  /* 以系统默认无衬线字体为基础，不影响其他字符样式 */
  src: local('sans-serif');
  /* 仅匹配下划线的Unicode编码 U+005F */
  unicode-range: U+005F;
  /* 将下划线的尺寸收缩为0，完全不占位置也不显示 */
  size-adjust: 0%;
}
/* 应用到需要隐藏下划线的input元素 */
input.hide-underscore {
  font-family: 'hideUnderscore', sans-serif;
}

配套HTML代码：

<input type="text" class="hide-underscore" value="I_NEED_TO_HIDE_UNDERSCORE">

如果需要下划线保留原有占位宽度、只是不可见，可以把size-adjust: 0%替换为自定义字体，将下划线的字形设置为和背景色一致的同宽空白即可。

方案2：JS 文本替换（适合不需要保留原始下划线复制行为的场景） #

如果不需要保留原始下划线，可直接在渲染时替换下划线为空格，提交前再恢复为原始值：

const targetInput = document.querySelector('input');
// 页面渲染时替换为空格
targetInput.value = targetInput.value.replaceAll('_', ' ');
// 表单提交前恢复原始值
const submitValue = targetInput.value.replaceAll(' ', '_');

注意：该方案用户复制内容时得到的是空格，而非原始下划线

内容的提问来源于stack exchange，提问作者Matthias Hyldegaard Djernæs