Пространство нулевой ширины делает ссылку HTML неактивной - PullRequest
Новая
       22

Пространство нулевой ширины делает ссылку HTML неактивной

0 голосов
/ 13 октября 2018

Я создаю ссылку на страницу на основе имени, которое пользователь дал этой странице.Тем не менее, ссылка не может быть кликабельна, если имя является пробелом нулевой ширины.

Как я могу помешать пользователям давать страницам некликаемые имена?Я хотел бы разрешить символы Unicode, если это возможно.

Имена вводятся в базу данных через форму Django, а HTML-ссылка создается в jQuery.Джанго жалуется, если имя является обычным пробелом, но принимает пробел нулевой ширины. 

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>

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Вдохновленный ответом Наеда и комментариями devdob , я решил добавить суффикс, когда текст ссылки не содержит букв или цифр.Это предотвратит повреждение любого полезного текста Unicode, но всегда должно содержать полезную ссылку.

К сожалению, Unicode не очень умен.Например, китайские слова всегда получат суффикс ссылки.

Некоторые варианты улучшения:

  1. Найдите список всех невидимых символов Юникода и найдите их явно.Я обеспокоен тем, что в будущем могут быть добавлены новые невидимые символы Юникода.
  2. Перечислите еще блоков видимых символов Юникода помимо латинских букв и цифр.Это кажется лучшим вариантом, но я думаю, что мое приложение будет в порядке, если оно не имеет имен 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>
0 голосов
/ 13 октября 2018

Обнаружить и заменить пробел с нулевым или пустым пробелом.Затем при создании ссылки либо пропустите этот текст (не показывать ссылку, если ноль), либо покажите текст ссылки по умолчанию, например, «Нажмите здесь».

Вот код, который определяет пространство нулевой ширины и заменяет его пустой строкой.: 

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

Здесь мы устанавливаем значение по умолчанию, если данное поле пусто: 

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