javascript - 零宽度空间使 HTML 链接无法点击

Question

我正在根据用户为该页面指定的名称创建指向该页面的链接。但是，如果名称是零宽度空格，则该链接无法单击。

如何阻止用户为页面指定不可点击的名称？如果可能的话，我希望允许使用 Unicode 字符。

名称通过 Django 表单输入数据库，并且 HTML 链接正在 jQuery 中构建。如果名称是常规空格，Django 会提示，但接受零宽度空格。

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

检测零宽度空间并将其替换为空或空白空间。然后，在创建链接时，要么跳过该文本(如果为空，则不显示链接)，要么显示默认链接文本，例如“单击此处”。

这里是一些检测零宽度空格并将其替换为空字符串的代码:

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

如果给定为空，我们在这里设置默认值:

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