将逗号插入从网站复制的文本中

Question

我经常遇到烦人的现象。我在浏览器中选择了一个地址（Firefox）：

^{来自yelp.com的示例}

使用the !maps DuckDuckGo bang：

将其复制到我的地址栏

我们立即看到问题：门牌号码和邮政编码没有分开，谷歌地图往往无法找到地址（不出所料）。

这种情况下的代码是：

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

我可以想象使用<p>或<div>代替地址的类似代码;相关部分似乎是<br>将被复制粘贴的方式。

以下也是可以想象的：

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

以同样的方式复制。

因此，如果我在我的网站上放置一个地址（或写一个用户样式），我该如何以有用的方式复制地址，例如在各个字段/行之间使用逗号？

HTML5和CSS3的答案很好，可以要求当前的浏览器;我不关心向后兼容性。没有Javascript的答案是首选。

我试过了br::before { content: ", "; }，但这没效果。

Answer 1

我只能用JS做，你需要注入greasemonkey或其他扩展名。

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>

Answer 2

Hack＃1：包含一个不可见的逗号。

<address>
      Hans-Sachs-Str. 8<span style="opacity: 0;">,</span><br>
      80469    Munich
</address>

这实际上是非常不引人注目的，因为它甚至不会出现在选择中，只会出现在粘贴的文本中。

缺点：如果没有JS，不能自动将其插入现有网站。 （或者我可以吗？）

Answer 3

如果使用CSS伪元素（::before和::after）插入演示内容，则无法将该内容复制到剪贴板上。

所以，我认为你必须使用javascript和DOM操作插入任何逗号。

以下是另一种JavaScript方法：

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

<address>
<span class="strasse">Hans-Sachs-Str. 8</span>
<span class="stadt">80469 Munich</span>
<span class="land">Germany</span>
</address>