How can I make leading or trailing spaces visible in a Rails HTML view?

Question

I am displaying data that is being pulled one-way from another system and I would like to highlight (not trim) trailing and leading spaces so people can see the unwanted spaces and update the data in the source system.

I'm using Rails so the obvious solution is to use the ActionView::Helpers::TextHelper.highlight method but I had some trouble getting it to behave the way I want/expect:

<%= highlight(' Adam John  ', /^\s*|\s*$/) %>
<!--         renders         -->
<mark> </mark>Adam John<mark>  </mark><mark></mark>

This generates the HTML I wanted but it turns out neither Blink nor WebKit mark leading or trailing spaces...

The same thing happens when I try to use <span> instead of <mark>... The output is correct but browsers don't display it.

<%= highlight(" Adam John  ", /^\s*|\s*$/, highlighter: '<span class="bg-blue-700">\1</span>') %>
<!--         renders         -->
<span class="bg-blue-700"> </span
Adam John
<span class="bg-blue-700">  </span>
<span class="bg-blue-700"></span>

Is there a better way to achieve this than using highlight? My end goal is to make it clear there's extra characters there... either highlight them yellow or have something a bit like text editors and word processors do when "Invisibles" are turned on... but only the leading and trailing invisibles:

Answer 1

While researching this question I came up with a solution (and a variation) that I am sharing here. If anyone has a better answer I will happily accept that instead.

Instead of trying to fight rendering engines, replace the unwanted space(s) with some other character. A subtle dot similar to what word processors and text editors often use can be achieved like this (utility classes from Tailwind CSS):

<%= highlight(" Adam John  ", /^\s*|\s*$/, highlighter: '<mark class="bg-white text-gray-400">&middot;</mark>') %>

...or highlight the unwanted spaces bright yellow by replacing them with non-breaking spaces (or adding an HTML entity to force it to display):

<%= highlight(" Adam John  ", /^\s*|\s*$/, highlighter: '<mark>&nbsp;</mark>') %>

Side notes

I spent some time figuring out how <mark> works with different spaces. I experimented with invisible characters like ‍ and ­ as well as space and  

<h6 class="font-medium text-sm text-gray-700">How &lt;mark&gt; handles spaces</h6>
<div class="mb-2 text-sm leading-5 text-gray-700">
  <p>&lt;mark&gt;<mark> </mark>can<mark> </mark>highlight<mark> </mark>spaces<mark> </mark><strong>between</strong><mark> </mark>words...</p>
  <p><mark>  ...but regular leading and trailing spaces are ignored  </mark></p>
  <p><mark> </mark> <!-- this line doesn't even get displayed --> <mark> </mark></p>
  <p><mark>&nbsp;Non-breaking leading and trailing spaces can be highlighted as part of longer string...&nbsp;</mark></p>
  <p><mark>&nbsp;</mark>...or even on their own<mark>&nbsp;</mark></p>
  <p><mark>&zwj; A zero width joiner outside a space means the space gets highlighted... &zwj;</mark></p>
  <p><mark>&zwj; </mark>...even on their own:<mark> &zwj;</mark></p>
  <p><mark>&zwj; </mark> <mark> &zwj;</mark></p>
  <p><mark>&shy; A short hyphen is shy but outside a space means the space gets highlighted... &shy;</mark></p>
  <p><mark>&shy; </mark>...even on their own:<mark> &shy;</mark></p>
  <p><mark>&shy; </mark> <mark> &shy;</mark></p>
</div>