Счётчик символов для сайта: своё приложение в Ное

Один эмодзи может оказаться длиннее целого слова, если считать текст обычной программной командой. Свой счётчик символов в Ное поможет видеть длину текста с пробелами и без них — и заранее договориться, что именно считается одним знаком.

Это пригодится для объявлений, карточек товара и редакционных ограничений. У такого инструмента два результата: понятная цифра для человека и честная проверка по правилам площадки, куда отправится текст. У площадки способ счёта может отличаться.

Как должен считать символы счётчик для сайта?

Считайте видимые составные знаки через Intl.Segmenter с настройкой granularity: 'grapheme'. Покажите два результата: все знаки вместе с пробельными и знаки без пробельных. Отдельно объясните, что пробел, перенос строки и табуляция входят в первую цифру, а из второй исключаются.

Название Intl.Segmenter выглядит сложнее самой идеи. Это встроенный инструмент браузера, который умеет находить границы знаков. Семейный эмодзи состоит из нескольких связанных частей, но на экране выглядит одним рисунком. Такой рисунок и считаем одним знаком.

У официальной справки MDN есть описание сегментации текста на графемы, слова и предложения. Для нашей задачи нужна графема — единица, которую читатель воспринимает как отдельный знак. Слова и предложения в этот первый проект добавлять незачем.

Три проверки, на которых видно разницу

Начните с короткой строки «Ноя ✨». В ней 5 знаков с пробелом и 4 без него. Это простой пример: слово, разделитель и один эмодзи. Он проверяет обе цифры сразу.

Теперь вставьте семейный эмодзи «👨‍👩‍👧‍👦». Он должен дать 1 в обеих цифрах. У строки JavaScript свойство length возвращает 11: оно считает элементы внутренней записи текста, поэтому напрямую использовать его для такого интерфейса нельзя.

Наконец, сравните «й» и букву «и» с добавленным знаком кратки: «й». На экране это один знак в обоих случаях, хотя внутренняя запись различается. Счётчик должен показать 1 и 1. Полагаться на число букв, видимых в редакторе кода, здесь неудобно.

В последней строке таблицы счётчик должен сохранить все введённые пробелы. Иногда человеку нужно увидеть лишние пробелы. Метод trim удаляет пробельные знаки по краям строки — он меняет исходный текст, поэтому для подсчёта сохраняем строку целиком.

Готовое задание для Билдера Нои

Скопируйте задание и отправьте его в диалоге проекта. В нём заранее определены и способ счёта, и поведение ошибок, и граница первого варианта.

Создай одностраничное веб-приложение «Счётчик символов» на русском языке. Оно должно удобно работать на телефоне и компьютере.

Задача: человек вставляет текст и сразу видит число знаков с пробельными и без пробельных. Весь подсчёт выполняй в браузере. Не отправляй введённый текст на сервер, в аналитику или сторонние сервисы и не сохраняй его между посещениями.

Интерфейс:
1. Заголовок и короткое объяснение способа счёта.
2. Одно большое текстовое поле с видимой подписью «Ваш текст». Подсказка внутри не заменяет подпись.
3. Две карточки: «С пробельными знаками» и «Без пробельных знаков». Под ними поясни: пробел, перенос строки и табуляция входят в первую цифру, но исключаются из второй.
4. Кнопка «Очистить» удаляет текст и возвращает фокус в поле. При пустом поле обе цифры равны нулю.
5. Сохрани введённый текст без обрезки пробелов по краям. Приведи переводы строк CRLF и CR к LF перед подсчётом. Считай одну строку перевода строки одним пробельным знаком.
6. Для числа видимых знаков используй Intl.Segmenter('ru', { granularity: 'grapheme' }). Для результата без пробельных исключай сегменты, целиком состоящие из пробельных символов, по Unicode-совместимому регулярному выражению. Не используй String.length как число видимых знаков.
7. Если Intl.Segmenter отсутствует, покажи понятное сообщение о неподдерживаемом браузере. Не подменяй результат другим способом молча.
8. Сделай доступные подписи и заметный фокус клавиатуры. При ширине 320 px не должно быть горизонтальной прокрутки. Не добавляй регистрацию, рекламу, оплату, базу данных и внешние библиотеки для подсчёта.

Проверки результата:
«Ноя ✨» — 5 и 4; «👨‍👩‍👧‍👦» — 1 и 1; «й» — 1 и 1; «й» — 1 и 1; «Ноя\nИИ» — 6 и 5; три пробела — 3 и 0. Проверь вставку, удаление, очистку и работу с клавиатуры. Если требования противоречат друг другу или данных не хватает, сначала уточни спорный пункт. После создания дай список выполненных проверок и того, что требует решения.

Откройте Билдер Нои, создайте проект сайта и отправьте это задание в чат. В предпросмотре сначала проверьте короткие строки из таблицы. Потом попросите исправить конкретное расхождение, если оно есть: какой текст вставили, какой ответ получили и какой ожидали.

Для такого инструмента подходит именно веб-приложение: человек открывает ссылку и работает в браузере. Страницу можно сразу открыть по ссылке. Что ещё можно собрать таким способом, объясняет разбор создания сайтов с ИИ.

Как выглядит проверенный пример интерфейса

На картинке — собственный работающий пример по этому заданию. Поле показывает «Ноя ✨», а обе цифры остаются рядом с объяснением. Разница на единицу сразу связывается с пробелом между словом и эмодзи.

На телефоне подписи важнее декоративных значков. Под результатом «Без пробельных знаков» должно быть понятно, что переносы тоже исключены. Если назвать карточку только «Без пробелов», читатель может ожидать другого счёта строк и табуляций.

Результат обновляется после ввода и вставки. Отдельная кнопка «Посчитать» для такой короткой операции лишь добавит лишнее действие. Кнопка очистки, напротив, полезна: она позволяет начать следующий текст и сразу вернуться к полю.

Что проверить перед публикацией

Вставьте длинный текст, затем удалите половину и убедитесь, что цифры уменьшились. Проверьте пустое поле, строки из одних пробелов, эмодзи и перевод строки. Нажмите Tab: фокус должен пройти через поле и кнопку в понятном порядке.

Откройте инструменты браузера и посмотрите сетевые запросы при наборе текста. Для заданного режима текст должен оставаться в браузере. Это проверяют после сборки, особенно если позже добавили аналитику или сторонний виджет. Поведение проверяют на конкретной версии страницы.

Сравните результат с той площадкой, ради которой считаете текст. Если она считает длину другим способом, сделайте отдельный режим с названием площадки и её подтверждёнными правилами. За одинаковой надписью «символы» у двух сервисов могут стоять разные правила.

После проверки опубликуйте проект штатной кнопкой и повторите те же действия по публичной ссылке. Предпросмотр и опубликованная версия — два разных места проверки. Сохраните эти контрольные строки вместе с результатами для следующей правки.

Как развивать инструмент дальше

Первое полезное расширение — лимит конкретного поля. Человек выбирает свой предел и видит, сколько знаков осталось. Сначала определите способ счёта для этого поля, потом добавляйте индикатор: иначе красивый красный счётчик будет предупреждать по неверной цифре.

Для редакции можно добавить несколько полей: заголовок, анонс и описание. У каждого свой предел. Хранение черновиков, общий доступ и отправка в другую систему потребуют отдельного решения по данным и настройке интеграции. У локального счётчика такой передачи пока нет.

По нашей ссылке Нои новым пользователям доступен удвоенный стартовый баланс; актуальные условия видны при регистрации. Ссылка партнёрская: портал может получить вознаграждение за приведённого пользователя.

Частые вопросы

Почему length показывает другое число?

В JavaScript length считает кодовые единицы UTF-16. Некоторые эмодзи и составные знаки занимают несколько таких единиц, хотя человек видит один знак.

Считается ли перенос строки символом?

В этом приложении — да, в результате с пробельными знаками. В результате без пробельных он исключается вместе с пробелами и табуляцией.

Нужно ли удалять пробелы по краям?

Для точной проверки исходного текста оставляйте их. Отдельную кнопку очистки лишних пробелов можно добавить позже, но она должна менять текст только по явному действию человека.

Можно ли вставлять конфиденциальный текст?

Перед этим проверьте, что конкретная опубликованная версия действительно считает локально и не передаёт ввод. Для общего публичного инструмента безопаснее начать с неперсональных примеров.

Зачем делать свой счётчик, когда есть готовые?

Свой инструмент удобен, когда нужно объяснить способ счёта, добавить поля вашей редакции и сохранить нужное поведение. Для разовой проверки подойдёт и готовый сервис с понятными правилами.

Что сделать сейчас

1. Выпишите, для какого поля нужен счётчик и что в нём считается одним знаком.
2. Возьмите шесть коротких проверок из задания и сохраните ожидаемые цифры.
3. Создайте первый вариант в Ное и проверьте его в предпросмотре.
4. Опубликуйте страницу и повторите ввод, очистку и проверку на телефоне.

Начните с одной строки «Ноя ✨». Когда обе цифры совпали с ожиданием, переходите к составному эмодзи — он быстрее всего покажет ошибку в способе счёта.

Что почитать дальше

• Генератор QR-кодов в Ное — следующий пример небольшого приложения с вводом и мгновенным результатом.
• Калькулятор скидки — как заранее записать формулу и проверить округление чисел.