Как обрезать длинную строку и добавить в конец точки на javaScript

Как обрезать длинную строку на javaScript. Введение

Я уже как-то писал статью как обрезать длинную строку и добавить в конец точки, только в прошлой статье код был написан на php. В этой статье реализован практически тот же функционал, только на javaScript. Чтобы код не повторялся, я решил его немного разнообразить. Помимо обрезания строки и подстановки в конец точек можно сделать плавное осветление последних символов.

Для работы будем использовать библиотеку jQuery — не забудьте ее подключить на странице.

Обрезать строку и плавно осветлить последнии символы. Алгоритм

При обрезании строки сложностей не должно возникнуть, для этого можно воспользоваться функцией substr. А вот с осветлением немного сложней. Плавно осветлять будем последнии 10 символов. Для этого необходимо обрезать последнии 10 символов и по одному обернуть каким-нибдуь строчным элементом, например, span. И каждому спану необходимо присвоить свой цвет. После этого получившуюся конструкцию из спанов прилепим к тексту с обычным текстом.

Обрезать строку и плавно осветлить последнии символы. Код

Для удобства код оформлен в виде функции, также код подробно прокомментирован, поэтому все должно быть понятно.

/**
* Функция для сокращения длинного текста
* @var object element - элемент, в котором необходимо укоротить текст
* @var int count_lit - лимит символов
* @var bool light - true|false задать осветление последних символов или нет
*/
function cutLongString(element, count_lit, light){
	// текст в блоке
	var text = element.html();
	// длина текста в блоке
	var all_len = text.length;
	// хранилище для нового текста
	var new_text;
	
	// если текст больше заданного лимита, то обрезаем его
	if (all_len > count_lit){
		// обрезаем текст и добавляем три точки в конец
		new_text = text.substr(0, (count_lit - 3)) + '...';
		// если необходимо задать осветление последним символам
		if(light){
			// кусок обычного текста
			var first_part_text = new_text.substr(0, (count_lit - 10));
			// кусок текста, который будет осветлен
			var light_part_text = new_text.substr((count_lit - 10), count_lit);
			// переменная, для хранения осветленного текста
			var light_text = "";
			// цвета для последний 10 символов
			var array_color = ["#444444", "#545454", "#646464", "#747474", "#848484", "#949494", "#a4a4a4", "#b4b4b4", "#c4c4c4", "#d4d4d4"];
			// перебираем по одному символу текст, который будет осветлен
			for(var i = 0; i < 10; i ++){
				// оборачиваем каждый символ в span и задаем ему цвет
				light_text += "<span style='color: " + array_color[i] + "'>" + light_part_text.substr(i, 1) + "</span>";
			}
			// склеиваем две части текста
			new_text = first_part_text + light_text;
		}
		// заменяем текст в блоке
		element.html(new_text);
	}
}

И пример использования:

$(document).ready(function(){
	// после загрузки страницы вызываем функцию
	// обрезание с осветлением
	cutLongString($('.example_div'), 200, true);
	// обрезание без осветления
	// cutLongString($('.example_div'), 200, false);
});

На этом все, если необходимо, то можете скачать рабочий исходник — тут.