在HTML文本框中显示不可打印字符

Question

我有一个文本区域，其中的内容显示如下：

我想要它显示的是非打印字符，例如空格和换行符（以LibreOffice中的屏幕截图为例）：

这是否可能在文本区域中显示非可打印字符？

- Markus

---

你必须使用split或explode来检测并查找这些字符，然后适当地进行替换。 - JoelBonetR

也许您可以使用自定义字体，该字体具有这些字符的可视化定义？但我不知道字体文件如何实现这种功能... - Joshua Muheim

Answer 1

我在搜寻文本中的Unicode字符时遇到了同样的问题，但无法找到解决方案。

所以我在https://jsfiddle.net/boppy/3orednps/8/上制作了一个基本的解决方案。

请把它只当做起点。我是为在Chrome中使用而制作的，只对少量细节进行了修改以便在Firefox中运行。- 至少它添加了OP要求的所有字符。

基本上它是这样的（请保持顺序！）：

        // _spc ==> Single Space Char chr(32)
        html = html.replace(/ /g, '<span class="_m _spc">&middot;</span>');

        // _tab ==> Tab Stops chr(9)
        html = html.replace(/\t/g, '<span class="_m _tab"></span>');

        // CarriageReturn chr(13)
        html = html.replace(/\r/g, '');

        // _brk ==> NewLine chr(10)
        html = html.replace(/\n/g, '<span class="_m _brk">¶</span><br>');

        // _np  ==> non-printable lower ASCII range chr(0)...chr(31) + personally known char(s)
        html = html.replace(/([\u0000-\u001F\u00AD])/g, '<span class="_m _np">$1</span>');

        // _uc  ==> Upper unicode range starting chr(255)
        html = html.replace(/([\u00FF-\u9999])/g, '<span class="_m _uc">$1</span>');

- boppy

---

正是医生开的药方！谢谢。这应该是被接受的答案。 - Neithan Max

Answer 2

你必须使用ASCII到HTML代码来打印这些字符，这不是CSS的工作，也不是文本区域的工作。

你可以在这里找到代码: http://www.ascii.cl/htmlcodes.htm

祝好！

- JoelBonetR

---

我只想展示它们，以便它们能够被注意到（就像尾随空格一样）。 （顺便说一句：我不能简单地删除尾随空格，因为有时它是有意的，但有时不是）。 我希望有一个比替换它们更简单的解决方案（通过JS）。 - Markus

你也可以用PHP或其他服务器语言来替换它。解决方案是这样的，也许有人创建了一个脚本来实现这个目标，但如果有脚本，那么肯定是有人手工制作的，所以没有更简单的方法来实现这个目标。你想要什么？在某个地方放置一个关键字，然后通过魔力力量让特殊字符出现吗？:/ - JoelBonetR

在某个位置放置关键词，让特殊字符像魔法一般出现！没错，在每个文字处理软件中都是这样的。;-) 我曾希望有一些 CSS 规则或已经编写好的 JavaScript 脚本，但我没有找到。看起来似乎也没有。服务器端的替换也不是解决方案，因为当用户编辑文本框中的文本时会发生什么呢？ - Markus

“那只是每个文字处理软件的工作原理。”错了，这是有人编程实现的……如果用户在文本区编辑文本，就可以触发一个jQuery函数：“按键按下”。什么？ - JoelBonetR