Question

在visual studio和其他代码编辑器中，可以查看空格字符。这些将在行中显示为小椭圆。

是否可以在html中模仿此功能。我已经能够使用pre标签来显示文字，但我对如何显示空白字符感到茫然。

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

Answer 1

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

示例脚本（假设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");

其中jsstring表示带有要更改的文本的javascript变量。请注意，您可以通过jquery html()函数获取和设置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;%%}

在预标记中显示空格字符

3 个答案: