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

Question

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

^{示例来自 yelp.com}

复制到我的地址栏，使用the !maps DuckDuckGo bang:

我们立即看到了问题：门牌号和邮政编码没有分开，而且通常 Google 地图然后找不到地址（不足为奇）。

本例代码为：

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

以同样的方式复制。

所以如果我在我的网站上放一个地址（或写一个用户风格），我怎样才能以有用的方式复制粘贴地址，例如个人之间用逗号 fields/lines?

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

我试过 br::before { content: ", "; } 但没用。

Answer 1

技巧 #1：包含一个不可见的逗号。

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

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

缺点：没有JS无法将其自动插入现有网站。（或者我可以吗？）

Answer 2

我只能用 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 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>

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

Inserting a comma into text copied from a website

html

css

copy-paste