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

我经常遇到恼人的现象。我选择的浏览器（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>

其中在用同样的方法拷贝。因此，如果我在我的网站上放置地址（或写入用户样式），我怎样才能以有用的方式制作地址复制粘贴，例如，用单个字段/行之间的逗号分隔？

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

我试过br::before { content: ", "; }但没有奏效。

来源

2017-10-07 Raphael

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

来源

2017-10-07 11:53:42 rafaelcastrocouto

黑客＃1：包含一个隐形的逗号。

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

这其实是相当非侵入的，因为它甚至不会在选择显示出来，只有在粘贴的文本。

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

来源

2017-10-07 11:41:16 Raphael

如果插入表象的内容使用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>

来源

2017-10-07 21:08:47 Rounin

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

回答

相关问题