javascript - 在 pre 标签中显示空格字符

Question

在 Visual Studio 和其他代码编辑器中，可以查看空白字符。这些将显示为线条中的小椭圆。

是否可以在 html 中模仿此功能。我已经能够使用pre标签来显示文本，但我不知道如何显示空白字符。

是否可以通过 CSS 或 javascript 显示空白字符？

Answer 1

您可以将pre元素中的每个空格包裹在span背景中，以便空格变得可见，但您可以像往常一样复制文本。这是一个JSFiddle 示例。

示例脚本（假设 中没有嵌套标签pre）：

var pres = document.querySelectorAll('pre');

for (var i = 0; i < pres.length; i++) {
    pres[i].innerHTML = pres[i].innerHTML.replace(/ /g, '<span> </span>')
}

CSS：

pre > span {
    display: inline-block;
    background: radial-gradient(circle, #cc0, rgba(192,192,0,0) 2px);
}

或者，您可以为元素使用自定义字体pre，其中空白字符被替换为可见的内容。

Answer 2

你可以用省略号替换空格字符，比如

jsstring.replace(/[\s]/g, "\u2026");

wherejsstring表示带有要更改的文本的 javascript 变量。请注意，您可以通过 jqueryhtml()函数获取和设置 html 标记的文本表示形式，包括其内容。

如果您希望保留换行符，请使用

jsstring.replace(/[ \t]/g, "\u2026");

（在jsfiddle 上可用的示例：http://jsfiddle.net/collapsar/ARu7b/3/）。

实际上，[\s]只是 . 的简写[ \t\r\n]。您可以定义自己的字符类，其中包含您认为是空白字符的内容。

Answer 3

用 CSS 是不可能做到的，但在 Javascript 中你可以做这样的事情。请注意，我使用了 jQuery；如果您没有在项目中加载 jQuery，请告诉我将我的代码更改为纯 JavaScript。

例如你有类似的东西：

<pre>
    ul.nav-menu { list-style: none; }
    ul.nav-menu li:last-child { border: none; }
    ul.nav-menu li a { color: #b3b3b3; display: block;  }
</pre>

你可以做：

<script>
    var text = $("pre").html();
    $("pre").empty()
    words = text.split(" ");
    for (i = 0; i < words.length; i++) {
        $("pre").append(words[i] + '%');
    }
</script>

它会用任何字符替换空格，如“%”或其他字符。
结果将是：

ul.nav-menu%{%list-style:%none;%}
ul.nav-menu%li:last-child%{%border:%none;%}
ul.nav-menu%li%a%{%color:%#b3b3b3;%display:%block;%%}