Inserting a comma into text copied from a website

Question

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

^{Example from yelp.com}

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

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:


    Hans-Sachs-Str. 8
80469 Munich
Germany

I can imagine similar code with

or

instead of address; the relevant part seems to be how

will be copy-pasted.

The following is also conceivable:

Hans-Sachs-Str. 8
80469 Munich

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.

user_1242389 · Answer

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

var commaHtml = ', ';
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*/
}


    Hans-Sachs-Str. 8

    80469 Munich

    Germany

user_539599 · Answer

Hack #1: Include an invisible comma.


      Hans-Sachs-Str. 8,

      80469    Munich

This is actually quite unintrusive since it won't even show up in the selection, only in the pasted text.

Disadvantage: can't insert this automatically into existing websites without JS. (Or can I?)

user_3897775 · Answer

If you insert presentational content using CSS pseudo-elements (::before and ::after), you will not be able to copy that content onto the clipboard.

So, I think you will have to insert any commas using javascript and DOM manipulation.

Here is an alternative javascript approach:

var address = document.getElementsByTagName('address')[0];
var addressLines = address.querySelectorAll('.strasse, .stadt, .land');

for (var i = 0; i < (addressLines.length - 1); i++) {

    var comma = document.createElement('span');
    comma.classList.add('comma');
    comma.textContent = ',';
    address.insertBefore(comma, addressLines[i]);
    address.insertBefore(addressLines[i], comma);

}

span {
display: inline-block;
float: left;
}

.comma + span {
clear: left;
}


Hans-Sachs-Str. 8
80469 Munich
Germany

Inserting a comma into text copied from a website

3 Answers