Как обрезать текст и добавить в конце многоточие?
Иногда приходится ограничивать длинный текст, к примеру, в блоке с фиксированными размерами, чтобы текст не выходил за пределы этого блока. Часто делается так: текст, который не помещается в заданные размеры, обрезается, а в конце текста добавляется многоточие. Оно подсказывает пользователю, что текст отображается лишь частично.
Способ обрезания текста зависит от длины и числа строк.
Однострочный текст
Для одной строки есть специальное свойство text-overflow со значением ellipsis , которое добавляет многоточие в конце текста. Чтобы это свойство работало, нужно соблюсти ещё два условия.
- Текст должен выводиться в одну строку без переносов. Для запрета переносов мы используем свойство white-space со значением nowrap .
- Текст за пределами блока скрывается от просмотра с помощью свойства overflow со значением hidden .
Комбинируя три свойства white-space, overflow и text-overflow получим обрезанную строку с многоточием в конце (пример 1).
Пример 1. Использование text-overflow
Результат данного примера показан на рис. 1.
Рис. 1. Вид обрезанного однострочного текста
Многострочный текст
Ограничение нескольких строк представляет собой более сложную задачу, которая потребует применения целого набора нестандартных и устаревших свойств. Нам понадобится следующее.
- Свойство -webkit-line-clamp, которое ограничивает число строк. Значение 3 отобразит три строки, значение 4 — четыре строки.
- Свойство display со значением -webkit-box .
- Свойство -webkit-box-orient со значением vertical .
- Свойство overflow со значением hidden , оно скрывает текст за пределами блока.
Заметьте, что в большинстве случаев мы имеем дело не со стандартными стилевыми свойствами, а добавляем к ним префикс -webkit-. При этом все эти свойства с префиксами работают даже в Firefox.
Свойство display: -webkit-box в настоящий момент устарело, при вёрстке сейчас используется display: flex . Аналогично устарело и -webkit-box-orient: vertical , сейчас вместо него применяется flex-direction: column . При этом нельзя просто заменить устаревшие свойства современными, перестанет работать ограничение строк.
Также есть проблема и с высотой блока — при добавлении padding его значение прибавляется к высоте строк, в итоге отображается часть лишней строки. Чтобы этого избежать можно явно задать высоту блока или вложить один блок внутрь другого. В примере 3 свойство padding применяется к , а набор свойств для ограничения текста к
.
Пример 2. Использование -webkit-line-clamp
Результат данного примера показан на рис. 2.
Рис. 2. Вид обрезанного многострочного текста
Обратите внимание, что здесь нам не нужен text-overflow, многоточие добавляется через свойство -webkit-line-clamp.
Использование JavaScript
Если не хочется связываться с устаревшими свойствами, всегда можно воспользоваться JavaScript для решения нашей задачи. Библиотека Clamp.js позволяет выбрать алгоритм работы — с помощью -webkit-line-clamp , в этом случае применяется набор свойств из примера 2 или путём явного обрезания строки (пример 3).
Пример 3. Использование Clamp.js
Обратите внимание на параметр useNativeClamp . По умолчанию его значение равно true , в этом случае к элементу добавляется свойство -webkit-line-clamp . Если же указать значение false , тогда строка обрезается явно. Между этими алгоритмами Clamp.js есть небольшая разница, заметная при изменении размера окна браузера. Использование useNativeClamp:true обрезает строку лишь при необходимости, когда она превышает три строки. useNativeClamp:false обрезает всегда и при изменении размеров блока строка так и остаётся обрезанной.
Объекты URL
Встроенный класс URL предоставляет удобный интерфейс для создания и разбора URL-адресов.
Нет сетевых методов, которые требуют именно объект URL , обычные строки вполне подходят. Так что, технически, мы не обязаны использовать URL . Но иногда он может быть весьма удобным.
Создание URL
Синтаксис создания нового объекта URL :
new URL(url, [base])- url – полный URL-адрес или только путь, если указан второй параметр,
- base – необязательный «базовый» URL: если указан и аргумент url содержит только путь, то адрес будет создан относительно него (пример ниже).
let url = new URL('https://javascript.info/profile/admin');Эти два URL одинаковы:
let url1 = new URL('https://javascript.info/profile/admin'); let url2 = new URL('/profile/admin', 'https://javascript.info'); alert(url1); // https://javascript.info/profile/admin alert(url2); // https://javascript.info/profile/adminМожно легко создать новый URL по пути относительно существующего URL-адреса:
let url = new URL('https://javascript.info/profile/admin'); let newUrl = new URL('tester', url); alert(newUrl); // https://javascript.info/profile/testerОбъект URL даёт доступ к компонентам URL, поэтому это отличный способ «разобрать» URL-адрес, например:
let url = new URL('https://javascript.info/url'); alert(url.protocol); // https: alert(url.host); // javascript.info alert(url.pathname); // /urlВот шпаргалка по компонентам URL:
- href это полный URL-адрес, то же самое, что url.toString()
- protocol – протокол, заканчивается символом двоеточия :
- search строка параметров, начинается с вопросительного знака ?
- hash начинается с символа #
- также есть свойства user и password , если используется HTTP-аутентификация: http://login:password@site.com (не нарисованы сверху, так как редко используются).
Можно передавать объекты URL в сетевые методы (и большинство других) вместо строк
Мы можем использовать объект URL в методах fetch или XMLHttpRequest и почти во всех других, где ожидается URL-строка.
Вообще, объект URL можно передавать почти куда угодно вместо строки, так как большинство методов сконвертируют объект в строку, при этом он станет строкой с полным URL-адресом.
SearchParams «?…»
Допустим, мы хотим создать URL-адрес с заданными параметрами, например, https://google.com/search?query=JavaScript .
Мы можем указать их в строке:
new URL('https://google.com/search?query=JavaScript')…Но параметры должны быть правильно закодированы, чтобы они могли содержать не-латинские буквы, пробелы и т.п. (об этом подробнее далее).
Так что для этого есть свойство url.searchParams – объект типа URLSearchParams.
Он предоставляет удобные методы для работы с параметрами:
- append(name, value) – добавить параметр по имени,
- delete(name) – удалить параметр по имени,
- get(name) – получить параметр по имени,
- getAll(name) – получить все параметры с одинаковым именем name (такое возможно, например: ?user=John&user=Pete ),
- has(name) – проверить наличие параметра по имени,
- set(name, value) – задать/заменить параметр,
- sort() – отсортировать параметры по имени, используется редко,
- …и является перебираемым, аналогично Map .
Пример добавления параметров, содержащих пробелы и знаки препинания:
let url = new URL('https://google.com/search'); url.searchParams.set('q', 'test me!'); // добавим параметр, содержащий пробел и ! alert(url); // https://google.com/search?q=test+me%21 url.searchParams.set('tbs', 'qdr:y'); // параметр с двоеточием : // параметры автоматически кодируются alert(url); // https://google.com/search?query=test+me%21&tbs=qdr%3Ay // перебрать параметры (в исходном виде) for(let [name, value] of url.searchParams) < alert(`$=$`); // q=test me!, далее tbs=qdr:y >Кодирование
Существует стандарт RFC3986, который определяет список разрешённых и запрещённых символов в URL.
Запрещённые символы, например, нелатинские буквы и пробелы, должны быть закодированы – заменены соответствующими кодами UTF-8 с префиксом % , например: %20 (исторически сложилось так, что пробел в URL-адресе можно также кодировать символом + , но это исключение).
К счастью, объекты URL делают всё это автоматически. Мы просто указываем параметры в обычном, незакодированном, виде, а затем конвертируем URL в строку:
let url = new URL('https://ru.wikipedia.org/wiki/Тест'); url.searchParams.set('key', 'ъ'); alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8AКак видно, слово Тест в пути URL-адреса и буква ъ в параметре закодированы.
URL стал длиннее, так как каждая кириллическая буква представляется двумя байтами в кодировке UTF-8.
Кодирование в строках
Раньше, до того как появились объекты URL , люди использовали для URL-адресов обычные строки.
Сейчас URL часто удобнее, но строки всё ещё можно использовать. Во многих случаях код с ними короче.
Однако, если мы используем строку, то надо самим позаботиться о кодировании специальных символов.
Для этого есть встроенные функции:
- encodeURI – кодирует URL-адрес целиком.
- decodeURI – декодирует URL-адрес целиком.
- encodeURIComponent – кодирует компонент URL, например, параметр, хеш, имя пути и т.п.
- decodeURIComponent – декодирует компонент URL.
Возникает естественный вопрос: «Какая разница между encodeURIComponent и encodeURI ? Когда использовать одну и другую функцию?»
Это легко понять, если мы посмотрим на URL-адрес, разбитый на компоненты на рисунке выше:
http://site.com:8080/path/page?p1=v1&p2=v2#hashКак мы видим, в URL-адресе разрешены символы : , ? , = , & , # .
…С другой стороны, если взглянуть на один компонент, например, URL-параметр, то в нём такие символы должны быть закодированы, чтобы не поломать форматирование.
- encodeURI кодирует только символы, полностью запрещённые в URL.
- encodeURIComponent кодирует эти же символы плюс, в дополнение к ним, символы # , $ , & , + , , , / , : , ; , = , ? и @ .
Так что для URL целиком можно использовать encodeURI :
let url = encodeURI('http://site.com/привет'); alert(url); // http://site.com/%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82…А для параметров лучше будет взять encodeURIComponent :
let music = encodeURIComponent('Rock&Roll'); let url = `https://google.com/search?q=$`; alert(url); // https://google.com/search?q=Rock%26RollСравните с encodeURI :
let music = encodeURI('Rock&Roll'); let url = `https://google.com/search?q=$`; alert(url); // https://google.com/search?q=Rock&RollКак видим, функция encodeURI не закодировала символ & , который является разрешённым в составе полного URL-адреса.
Но внутри параметра поиска символ & должен быть закодирован, в противном случае мы получим q=Rock&Roll , что значит q=Rock плюс непонятный параметр Roll . Не то, что предполагалось.
Чтобы правильно вставить параметр поиска в строку URL, мы должны использовать для него только encodeURIComponent . Наиболее безопасно кодировать и имя, и значение, за исключением случаев, когда мы абсолютно уверены в том, что они содержат только разрешённые символы.
Разница в кодировании с URL
Классы URL и URLSearchParams базируются на последней спецификации URI, описывающей устройство адресов: RFC3986, в то время как функции encode* – на устаревшей версии стандарта RFC2396.
Различий мало, но они есть, например, по-разному кодируются адреса IPv6:
// допустимый URL-адрес IPv6 let url = 'http://[2607:f8b0:4005:802::1007]/'; alert(encodeURI(url)); // http://%5B2607:f8b0:4005:802::1007%5D/ alert(new URL(url)); // http://[2607:f8b0:4005:802::1007]/Как мы видим, функция encodeURI заменила квадратные скобки [. ] , сделав адрес некорректным. Причина: URL-адреса IPv6 не существовали в момент создания стандарта RFC2396 (август 1998).
Тем не менее, такие случаи редки. По большей части функции encode* работают хорошо.
js как удалить ссылку
При удалении элемента из DOM, сам объект элемента не удаляется, он все еще остается в памяти и может быть использован для дальнейшей манипуляции.
Однако, после удаления элемента из DOM, некоторые свойства этого элемента могут измениться (например, offsetParent будет равен null ). Поэтому, если вы планируете использовать этот элемент в дальнейшем, вам может потребоваться обновить его свойства после удаления из DOM.
Кроме того, если ссылка на элемент была сохранена в переменной или в свойстве объекта, то эта ссылка все еще будет указывать на этот элемент, даже после его удаления из DOM. В этом случае, если вы попытаетесь использовать эту ссылку, вы можете получить ошибку, если элемент уже не существует в DOM. Поэтому, если вы планируете использовать ссылку на элемент в дальнейшем, вам необходимо обновить ссылку после удаления элемента из DOM.
13 апреля 2023
Для получения ссылки можно использовать метод getElementById() или другие методы получения элементов. Далее, используя метод remove() или parentNode.removeChild() , можно удалить элемент из DOM.
Пример удаления ссылки по id:
href="#" id="myLink">Ссылка const link = document.getElementById('myLink'); link.remove(); // или link.parentNode.removeChild(link); Этот код найдет ссылку с id myLink и удалит ее из DOM.
Обрезать URL
Необходимо оставить все, кроме qwerty. Там будет текст из переменной. К сожалению в регулярках мало чего понимаю.
На данный момент вот что имею:
1 2 3 4 5
var url = 'https://twitter.com/intent/tweet?text=qwerty' tw = 'text' // будем подставлять этот текст url = url.replace(/^(https?:\/\/([^/]+\/)).*/, '$1' + tw); console.log(url);
Заранее спасибо
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как получить часть url return url
как получить часть url return url Привет всем! Вопрос от человека далекого от javaScript. у меня.
Обрезать по пробелу
Допустим есть строка. var str = "Привет, Вы можете написать мне по адресам: http://adress1.com, ";.
Обрезать строку
есть url вида http://?.site.ru/? ? — возможен любой символ, и любое количество так вот.
обрезать текст
Как обрезать текст спомощью JS к примеру до 30 символов но когда на него навести курсор чтобы он .