在html textarea中显示不可打印的字符

Mar*_*kus 0 html css whitespace textarea non-printing-characters

我有一个 textarea 内容显示如下:

文本区

我希望它显示的是不可打印的字符,例如空格和换行符(截图以 libre office 为例):

来自自由办公室的例子

是否可以在 textarea 中显示这样的不可打印字符?

bop*_*ppy 5

我刚刚在文本中搜索 Unicode 字符时遇到了同样的问题,但找不到解决方案。

所以我在https://jsfiddle.net/boppy/3orednps/8/做了一个基本的

请接受这仅作为起点。我是为了在 chrome 中使用它而制作的,并且只采用了一些小东西才能在 FF 中运行。- 至少它添加了 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>');
Run Code Online (Sandbox Code Playgroud)