javascript - Display space characters in pre tag - Stack Overflow

admin管理员组

文章数量:1405890

In visual studio and other code editors it is possible to view the white space characters. These would appear as small ellipses in the line.

Is it possible to mimic this feature in html. I have been able to use the pre tag to display the text but I am at a loss on how to display the white space characters.

Is it possible via CSS or javascript to show the white space characters?

In visual studio and other code editors it is possible to view the white space characters. These would appear as small ellipses in the line.

Is it possible to mimic this feature in html. I have been able to use the pre tag to display the text but I am at a loss on how to display the white space characters.

Is it possible via CSS or javascript to show the white space characters?

• javascript
• html
• css
• pre

Share Improve this question Follow edited Jul 31, 2013 at 15:18 css 95411 gold badge99 silver badges2727 bronze badges asked Jul 31, 2013 at 15:10 KamiKami 19.5k44 gold badges5252 silver badges6464 bronze badges 2

• 3 I would think that you would have to replace the white space character with a visible character such as a small ellipses. CSS has no character translation feature, but PHP and other languages do. – Marc Audet Commented Jul 31, 2013 at 15:14
• 1 I guess the solution would be to replace spaces with dots (i.e.) with javascript. – Brewal Commented Jul 31, 2013 at 15:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can wrap each space in your pre elements in a span with background, so the spaces bee visible, but you could copy the text as usually. Here is a JSFiddle example.

Example script (assuming there are no nested tags in the 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);
}

Alternatively, you can use a custom font for pre elements, in which the whitespace characters are replaced with something visible.

you could replace whitespace chars with the ellipsis symbol, like

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

where jsstring denotes a javascript variable with the text to alter. note that you can get and set the textual representation of an html tag including its contentby means of the jquery html() function.

in case you wish to keep line breaks, use

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

(example available on jsfiddle: http://jsfiddle/collapsar/ARu7b/3/).

in fact, [\s] is just a shorthand for [ \t\r\n]. you may define your own character class containing exactly what you consider to be a whitespace character.

It's impossible to do that by CSS but in Javascript you can do something like this. Note that I used jQuery; if you are not loading jQuery in your project let me know to change my code to plain JavaScript.

for example you have something like:

<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>

You can do:

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

And it will replace spaces with any characters like '%' or whatever.
Result will be:

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

本文标签： javascriptDisplay space characters in pre tagStack Overflow