Search code examples
csshtmlcopy-paste

Inserting a comma into text copied from a website

I often encounter an annoying phenomenon. I select an address in the browser (Firefox):

enter image description here
Example from yelp.com

Copy it into my adress bar, using the !maps DuckDuckGo bang:

enter image description here

We immediately see the problem: house number and zip code do not get separated, and more often than not Google Maps then fails to find the address (unsurprisingly).

The code in this case is:

<address>
    Hans-Sachs-Str. 8<br>80469 Munich<br>Germany
</address>

I can imagine similar code with <p> or <div> instead of address; the relevant part seems to be how <br> will be copy-pasted.

The following is also conceivable:

<tr><td>Hans-Sachs-Str. 8</td></tr>
<tr><td>80469 Munich</td></tr>

Which copies in just the same way.

So if I put an address on my website (or write a user style), how can I make addresses copy-paste in a helpful way, e.g. with a comma between the individual fields/lines?

Answers with HTML5 and CSS3 are fine, and current browsers can be required; I don't care about backwards compatibility. Answers without Javascript are preferred.

I tried br::before { content: ", "; } but that didn't work.

Solution

  • I could only do it with JS, you will need to inject with greasemonkey or some other extension.

    var commaHtml = '<span class="insertedComma">, </span>';
document.querySelectorAll('address').forEach(function(a){
  a.querySelectorAll('br').forEach(function(b){
    b.insertAdjacentHTML('beforebegin', commaHtml);
  });
});
    .insertedComma {
   color: red;
   /*opacity: 0; uncomment this line to make red commas disappear*/
}
    <address>
    Hans-Sachs-Str. 8<br>
    80469 Munich<br>
    Germany
</address>