零宽度 space 使 HTML link 不可点击

Question

我正在根据用户为该页面指定的名称为该页面创建 link。但是，如果名称为零宽度 space，则 link 不可点击。

如何阻止用户给页面起不可点击的名字？如果可能，我想允许使用 Unicode 字符。

正在通过 Django 表单将姓名输入数据库，HTML link 正在 jQuery 中构建。如果名称是常规 space，Django 会报错，但会接受零宽度 space.

var linkText1 = 'foo', linkText2 = '\u200b';
$('#ex1')
  .append($('<a>')
  .text(linkText1)
  .attr('href', 'javascript:alert("clicked.")'));
$('#ex2')
  .append($('<a>')
  .text(linkText2)
  .attr('href', 'javascript:alert("clicked.")'));

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

Answer 1

检测零位 space 并将其替换为 null 或空 space。然后在创建 link 时跳过该文本（如果为空则不显示 link）或显示默认的 link 文本，例如 "Click Here".

下面是一些检测零宽度 space 并将其替换为空字符串的代码：

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

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

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

Answer 2

受到 and 的启发，我决定在 link 文本不包含任何字母或数字时添加一个后缀。这将避免破坏任何有用的 Unicode 文本，但它应该始终提供可用的 link.

不幸的是，它对 Unicode 并不聪明。例如，中文单词将始终获得 link 后缀。

一些改进选项：

查找所有不可见 Unicode 字符的列表并明确查找它们。我担心将来可能会添加新的不可见 Unicode 字符。
列出更多 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>

零宽度 space 使 HTML link 不可点击

Zero-width space makes HTML link unclickable

html

javascript

django

unicode

zero-width-space