\ u200b (пространство нулевой ширины) в моем коде JS.Откуда они пришли?

Question

Я разрабатываю интерфейс веб-приложения с использованием среды IDE NetBeans 7.0.1.Недавно у меня была очень неприятная ошибка, которую я наконец исправил.

Скажем, у меня есть код

var element = '<input size="3" id="foo" name="elements[foo][0]" />';
$('#bar').append(element);

Я заметил, что что-то пошло не так, когда я увидел, что атрибут size не работаетв Chrome (не проверено в других браузерах).Когда я открыл этот элемент в Инспекторе, он был интерпретирован как что-то вроде

<input id="&quot;3&quot;" name="&quot;elements[foo][0]&quot;" 
    size="&quot;foo&quot;" />

, что было довольно странно.После повторного ввода строкового символа element ошибка исчезла.Когда я отменил это изменение, я заметил, что Netbeans предупредил меня о некоторых символах Юникода в моем старом коде.Это был \u200b - пробел нулевой ширины после каждого '=', между '] [' и в конце строки.Таким образом, строка выглядела нормально, потому что пробелы нулевой ширины не отображались, но после их выхода моя строка была

'<input size=\u200b"3" id=\u200b"foo" name=\u200b"elements[foo]\u200b[0]" />\u200b'

Теперь, где, черт возьми, я их получил?

Я не увереноткуда я скопировал код element, но он определенно один из следующих:

• Другая панель редактора Netbeans с файлом шаблона HTML;
• Google Chrome Inspector, 'Скопируйте как HTML 'действие;
• Страница просмотра исходного кода Google Chrome (очень сомнительно).

Но я не могу воспроизвести ошибку ни с этим.

Я использую Netbeans 7.0.1 и Google Chrome 13.0 под Windows 7. Нет переключателей клавиатуры или что-то вроде этого работает.Также я использую Git для контроля версий, но я не вытащил этот код, поэтому очень маловероятно, что Git виноват.Это не может быть глупой шуткой моих коллег, потому что они очень хорошо воспитаны.

Есть предложения, которые испортили мой код?

Answer 1

Вот удар в темноте.

Моя ставка будет на Google Chrome Inspector. При поиске в источнике хрома я обнаружил следующий блок кода

    if (hasText)
        attrSpanElement.appendChild(document.createTextNode("=\u200B\""));

    if (linkify && (name === "src" || name === "href")) {
        var rewrittenHref = WebInspector.resourceURLForRelatedNode(node, value);
        value = value.replace(/([\/;:\)\]\}])/g, "$1\u200B");
        attrSpanElement.appendChild(linkify(rewrittenHref, value, "webkit-html-attribute-value", node.nodeName().toLowerCase() === "a"));
    } else {
        value = value.replace(/([\/;:\)\]\}])/g, "$1\u200B");
        var attrValueElement = attrSpanElement.createChild("span", "webkit-html-attribute-value");
        attrValueElement.textContent = value;
    }

Вполне возможно, что я просто лаю не то дерево здесь, нопохоже, что пробелы нулевой ширины были вставлены (для обработки мягкого переноса текста?) во время отображения атрибутов.Возможно, функция «Копировать как HTML» не удаляла их должным образом?

---

Обновление

После того, как я поигрался с инспектором элементов Chrome, я почти уверен, что именно там у вас заблудились \u200bпришли из.Обратите внимание, как линия может переноситься не только в видимом пространстве, но и после = или символов, соответствующих /([\/;:\)\]\}])/, благодаря вставленному пространству нулевой ширины.

К сожалению,Я не могу воспроизвести вашу проблему там, где они случайно попадают в ваш буфер обмена (я использовал Chrome 13.0.782.112 в Win XP).

Конечно, стоило бы отправить сообщение об ошибке , если вы сможете воспроизвести поведение.

Answer 2

Как уже говорил мистер Шон Чин .Я только что повторил проблему, когда копировал код jquery с веб-страницы.

Когда это произошло: копирование текста из Google Chrome версии 41.0.2272.118 m (не тестировалось в других браузерах) в окно кода Dreamweaver.Это скопировало нежелательные символы в коде, как это происходит здесь

вы скопировали текст с веб-страницы как

$('.btn-pageMenu').css('display'​​​​​​​​​​​​​​​​​​​​​​​​​​​,'block');​​​​​​

за кулисами, вот что делает эту строку

<code><span class="pun">&#8203;</span><span class="pln">$</span><span class="pun">(</span><span class="str">'.btn-pageMenu'</span><span class="pun">).</span><span class="pln">css</span><span class="pun">(</span><span class="str">'display'</span><span class="pun">&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;,</span><span class="str">'block'</span><span class="pun">);&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;</span></code>

Скопированный в расширенный редактор, подобный тем, которые вы упомянули, или Dreamweaver выдает ошибки в браузере, возможно, при сбое кода javascript тоже

Uncaught SyntaxError: Unexpected token ILLEGAL

Решение.большие парниЭто больше относится к редактору, чем к браузерам.

Answer 3

Это случилось со мной, когда я скопировал исходный код с другого сайта в мой редактор. Если вы используете визуальный студийный код или редактор Atom, это выделит эти противные символы пробелом нулевой ширины \u200b) и т. Д.

• VSCode: https://marketplace.visualstudio.com/items?itemName=nhoizey.gremlins
• Редактор Atom: https://atom.io/packages/highlight-bad-chars
• возвышенный текст: https://packagecontrol.io/packages/Gremlins

Answer 4

Через 6 с лишним лет у меня возникает та же проблема, но я могу ее воспроизвести.

Я изучаю JavaScript из этого блога , который содержит фрагменты кода.Всякий раз, когда я копирую весь код из фрагмента и вставляю его в редакторы JavaScript JS Fiddle или JS Bin, я получаю в коде красные маркеры.Вот скриншоты первого фрагмента кода из вышеприведенного поста в блогах в JS Fiddle и JS Bin .Если навести указатель мыши на один из этих красных жетонов, появится подсказка: «\ u200b» ( пробел нулевой ширины ).

Я работаю в Linux Ubuntu 16.04, и если я вставляю код в один из моих редакторов (Atom 1.22.1 или Geany 1.32) и затем открываю файл в веб-браузерах, я получаю следующие ошибки вconsole:

• Chrome 63 -> SyntaxError: недопустимый или неожиданный токен
• Firefox 57 -> SyntaxError: недопустимый символ

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

Answer 5

Это должно исправить это для вас:

var element = $('<input size="3" id="foo" name="elements[foo][0]" />'); $('#bar').append(element);

или вы можете сделать это так, чтобы сделать его чище:

$('#bar').append($('<input />').attr({ size: '3', id: 'foo', name: 'elements[foo][0]' }));