Мы знаем какой интернет-магазин Вам нужен
Интернет-магазины для малого бизнеса, предпринимателей и самозанятых
Ваше имя:
Email:
Телефон:



или напишите в Telegram Whatsapp

Обрезка текста с помощью Javascript

Задача: Обрезать текст до какой-то длины и вставить ссылку "читать полностью", по нажатию на которую откроется остальной блок.

Рассматривается случай только форматированного текста с тегами. Суть функции: найти конец параграфа </p> или тег <br> после минимальной длины текста. Далее в эту позицию вставить ссылку, после нее все скрыть. По нажатию на ссылку - восстановить изначальный текст.


function cropText(box, minLength){
//box - элемент, с которым работаем,  minLength - минимальная длина текста, которая должна быть видна
    let text = box.innerHTML;

    if(text.length > minLength){
        let pos = text.indexOf('<br>', minLength+1);
        let pos2 = text.indexOf('</p>', minLength+1);

//выбираем ближайший конец строки или параграфа
        if(pos == -1  && pos2 != -1){pos = pos2;}
        if(pos < pos2 && pos2 != -1){pos = pos2;}

//в случае, если такая позиция есть, делаем, что и планировали
        if(pos != -1  &&  ((pos+4) < text.length)){
            box.innerHTML = text.slice(0, pos+4) + '...<br><a class = "swapmoreA">посмотреть полностью</a>';
            let aa = box.querySelector('.swapmoreA');
            aa.setAttribute('href', 'javascript: void(0);');
            aa.addEventListener('click', function(){
                box.innerHTML = text;
            })
        }
    }
}

Находясь на нашем сайте, вы принимаете условия использования файлов cookies. Более подробная информация здесь.