Как написать скрипт сокращения слов, но при этом чтобы слова не обрубал?

Question

[Ярослав Никитин]

Как написать такой скрипт, чтобы например, нужно ограничить текст в 100 знаков, но если просто например ограничивать, то может обрубить слово, нужно сделать так, чтобы слово это не обрубалось, а дописывалось до его конца, то есть до пробела и потом ставилось многоточие.

Например:
Сегодня хороший день.

Например, нужно сократить до 12 знаков, как не должно получится:
Сегодня хоро...

Например, нужно сократить до 12 знаков, как должно получится:
Сегодня хороший...

Надеюсь я сильно не нафантазировал, вроде на PHP так можно сделать, а на JS?

Answer 1

[Илья Лесных]

Алгоритм таков:
- обрезаем исходную строку от length до конца;
- в получившейся строке ищем ближайший пробел;
- обрезаем исходную строку до этого пробела.

jsfiddle.net/Aliance/gpvLv/1

Comments

[Ярослав Никитин]

Как его использовать на сайте? Глупый конечно вопрос, но у меня не работает:

После боди:

<script type="text/javascript">
	function minify(text, length) {
    return text.slice(0, text.indexOf(' ', length)) + '...';
	}
	document.getElementById('message').innerHTML = minify(document.getElementById('message').innerHTML, 12);
	</script>

Сегодня хороший день.

[Ярослав Никитин]

<div id="message">Сегодня хороший день.</div>

[Илья Лесных]

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

[Ярослав Никитин]

@Aliance Я понимаю, то есть он совсем не обрубает, даже до 12, текст не важно какой, разместил просто текст в блоке message

[Илья Лесных]

Я вам дал ссылку, скрипт работает. Если при переносе на ваш сервер он не работает - какой вывод? Правильно, вы что-то делаете не так. Я же не могу гадать, ссылку или код в студию.

[Ярослав Никитин]

wpcofe.ru Нажми просмотреть код, так проще будет, чтобы тут не мусорить.

[Илья Лесных]

Ну так в консоль посмотреть что мешало? Там пишется ошибка:
Uncaught TypeError: Cannot read property 'innerHTML' of null

А все потому, что вы разместили скрипт ДО объявления блока, в момент выполнения скрипта блока еще нет в потоке. Помешать скрипты нужно перед закрывающим body, в данном случае еще и сам вызов функции можно поместить в window.onload

[Ярослав Никитин]

@Aliance Понятно, спасибо что объяснил.

[Ярослав Никитин]

А еще вопрос, тут айди message, а как сделать чтобы был класс message? Что-то с этой сделать надо document.getElementById?

<div class="message">Сегодня хороший день.</div>

[Илья Лесных]

native js: document.getElementsByClassName (см. javascript.ru/unsorted/top-10-functions#8-geteleme...

jQuery: $('.message')

[Ярослав Никитин]

Еще раз спасибо

[Константин Величко]

Спасибо, схоронил

[Ярослав Никитин]

@Aliance Можешь написать тоже самое, только для класса?

Answer 2

[Алексей Ванин]

Если по простому: пример

Answer 3

[Rsa97]

А зачем цельный скрипт?

short_text = ((pos = long_text.indexOf(" ", 100)) == -1 ? long_text : long_text.substr(0, pos) + "...");

Comments

[Илья Лесных]

например, чтобы не хардкодить 100 и иметь возможность повторно использовать данный алгоритм для любых text и length.

[Rsa97]

Дык а кто мешает заменить 100 на переменную? А обернуть в функцию?

[Ярослав Никитин]

@Rsa97 мешают мою ограниченные знания в JS

[Rsa97]

function short_text(long_text, max_length, postfix) {
var pos;
return ((pos = long_text.indexOf(" ", max_length)) == -1 ? long_text : long_text.substr(0, pos) + postfix);
}

console.log(short_text("Это очень длинный текст", 10, "???"));