Ограничить длину текста через jQuery

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

На практике текст обрезается php обработкой, в крайнем случае за счет css. Но как решить данную задачу скриптом?

Для этого надо использовать функцию .replace() вместе с регулярным выражением. Создадим код, который ограничивает длину заданного текста с помощью jQuery:

<script>
$(document).ready(function(){
$('.text').text($('.text').text().replace(/(\n|\r|\f)/g, ' '));
$('.text').html($('.text').text().replace(/(.{100}).{0,}/, '$1... <a href="/">Подробнее</a>'));
});
</script>
<div class="text">Здесь идет пример текста, длиной чуть больше, чем 100 символов с пробелами, без применения картинок и больших абзацев</div>

Разберем работу скрипта

Код привязывается к классу .text и ограничивает его длину до 100 символов (число в фигурных скобках, которое вы можете изменить как угодно). Первый .replace() очищает все содержимое .text от переводов строк. Второй ограничивает длину выводимого текста, после которого подставляет ссылку <a href="/">Подробнее</a>. Текст и саму ссылку вы можете задать любую или убрать вообще, удалив ее из кода.

Таким образом, если вы зададите данный код на идентификатор, содержимое которого нужно ограничить, jQuery это сделает. Но здесь стоит помнить, что данный код лишь визуально скрывает текст. Если вы откроете исходный код своего сайта, то текст (в полной версии) никуда не денется. Для этого уже надо использовать PHP.