零宽度空间使HTML链接不可单击

检测零WITDH空间并用零或空空间替换。然后在创建链接时,跳过该文本(如果为空,则不显示链接)或显示默认链接文本,如“单击此处”。

以下是一些代码,用于检测零宽度空间并将其替换为空字符串:

linkText2 = linkText2.replace(/\u200B/g,'');

这里我们设置一个默认值,如果给定值为空:

linkText2 = (linkText2 == '') ? "Click Here" : linkText2;

受到启发 Nawed's answer 和 devdob's comments 当链接文本不包含任何字母或数字时,我决定添加一个后缀。这将避免损坏任何有用的Unicode文本,但它应该始终提供可用的链接。

不幸的是,Unicode并不明智。例如,中文单词总是会得到链接后缀。

一些改进方案:

1. 查找所有不可见的Unicode字符的列表并显式查找它们。我担心将来可能会添加新的不可见Unicode字符。
2. 列出更多 blocks of visible Unicode characters 除了拉丁字母和数字。这似乎是最好的选择,但我认为我的应用程序会很好,只要它不是Unicode名称。

function addLink($p, linkText) {
  if ( ! /\w/u.test(linkText)) {
    linkText += ' [link]';
  }
  $p.append($('<a>')
    .text(linkText)
    .attr('href', 'javascript:alert("clicked.")'));
}
var linkText1 = 'foo', linkText2 = '\u200b', linkText3 = '网站';
addLink($('#ex1'), linkText1);
addLink($('#ex2'), linkText2);
addLink($('#ex3'), linkText3);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ex1">Example 1 </p>
<p id="ex2">Example 2 </p>
<p id="ex3">Example 3 </p>