JS 特殊字符展示 \u0001

1,115 阅读1分钟

比如数据分割用 '\u0001',但是在页面显示为方块,因为被html渲染了,很难受,不符合预期。
image.png

这么整用户看不了,想着直接判断如果是这个特殊字符,直接显示 \u0001,需要被转译一下,js绑定的字符串的值应为'\u0001'.

不能所有的字符都加'',需要判断一下,是特殊字符时,转译。 所以 我正则匹配,/\u\d{4}/.test('\u0001') // false
看着没毛病呀,为啥不对呀,看来这么判断有问题。
那就看下这个字符的长度吧'\u0001'.length // 1 不好这是一个字符

没招了,功能实现不了怎么下班。
突然想到vue的注入常量,我可以试一下 JSON.stringify('\u0001'), 结果不出所料

image.png
这有头绪了
再去掉两边的双引号,大功告成。

// Unicode \u0001
export function enFormatUnicode(str = ''): string {
  // After applying JSON.stringify, the result is '"str"'
  const newStr = JSON.stringify(str).replace(/^\"|\"$/g, '')
  if (newStr.startsWith('\\u')) {
    return newStr
  }
  return str
}

转换好了,提交时,还得转过来,很棒,搞成,下班。

export function deFormatUnicode(str = ''): string {
  // After applying JSON.stringify, the result is '"str"'
  if (str.startsWith('\\u')) {
    const newStr = JSON.parse(`"${str}"`)
    return newStr
  }
  return str
}

使用

const str = '\u0001'
const newStr = enFormatUnicode(str)  // '\\u0001' 双斜杆会转译,页面实际显示为`\u0001`

// 提交到服务端
const s = deFormatUnicode(newStr) // `\u0001`, html页面上显示 `\x01`
axios.post('/url', {
    str: s
})