Как преобразовать строку в HTML-элемент? — efim360.ru
Одной командой
new DOMParser().parseFromString(ТВОЯ_СТРОКА, "text/html").getElementsByTagName("ТВОЙ_ЭЛЕМЕНТ")[0]Рассмотрен случай преобразования готовой разметки HTML, которая лежит в JavaScript в виде строки.
ТВОЯ_СТРОКА — нужно указать свою строку
ТВОЙ_ЭЛЕМЕНТ — нужно указать HTML-элемент, который получается из строки (тот который задумывался изначально)
Пример реализации:
Пример создания HTML-элемента из строки — JavaScript[0] — это значение опционально, если нужно получить какой-либо один элемент из коллекции элементов. Работает целочисленный индекс как у массивов.
Видео инструкция
В этом видео приводится пример преобразования подготовленной строки в HTML-элемент при помощи JavaScript и стандарта «DOM Parsing and Serialization«.
Ввод команд осуществляется в консоль браузера Google Chrome. Результат виден сразу.
Строка до нужной строки. Или как мы пришли к этому вопросу.
Изначально была строка:
var stroka = "Скачать фото"Переменная stroka со значением — Скачать фото — JavaScript
Мы воспользовались «Дополнительными возможностями ECMAScript для веб-браузеров«. Мы воспользовались «Дополнительными свойствами прототипа объекта String» — а именно методом link() — String.prototype.link и обернули эту строку HTML-разметкой:
var newStrLink = stroka.link("efim360.ru")Мы получили строку, которая полностью оформлена как HTML-разметка (ВНИМАНИЕ! Это строковый тип данных JavaScript. Не объект DOM интерфейса Element):
<a href="efim360.ru">Скачать фото</a>
Вывод в консоль:
Метод link прототипа String — JavaScriptТеперь нам нужно преобразовать эту строку в HTML-элемент, чтобы иметь возможность взаимодействовать как с объектом.
(Доставать значения атрибутов, например из href-атрибута)
Решение задачи
Мы воспользуемся интерфейсом DOMParser, который описан в документе — DOM Parsing and Serialization — https://www.w3.org/TR/DOM-Parsing/
Сначала мы создаём новый объект конструктора DOMParser. Вызываем конструктор при помощи оператора new. Не передаём никаких параметров в конструктор.
new DOMParser()
Затем у этого объекта мы обращаемся к единственному методу parseFromString:
new DOMParser().parseFromString()
Функция parseFromString() принимает два параметра:
- Нужная нам строка
- Один из пяти Mime-типов в строком виде («text/html», «text/xml», «application/xml», «application/xhtml+xml», «image/svg+xml»)
Передаём нужные параметры:
new DOMParser().parseFromString(newStrLink, "text/html") или new DOMParser().parseFromString(newStrLink, "text/xml")
Эта конструкция вернёт нам полноценный документ.
С этого момента у нас есть два пути:
- Использовать «text/html» (правильный)
- Использовать «text/xml»
Путь № 1 — Использовать «text/html»
Мы получаем новый документ в переменную newDoc.
var newDoc = new DOMParser().parseFromString(newStrLink, "text/html")
Вывод в консоль браузера:
DOMParser() возвращает новый документ, ссылка из строки — JavaScriptНам не нужен сам документ. Нам нужен элемент ссылки, который появился в этом документе.
Мы положили новый документ в переменную и теперь можем отобрать все элементы-ссылки в этом документе (по сути, мы отловим ИМЕННО НАШУ СТРОКУ, с которой начинали)
var aHColl = newDoc.getElementsByTagName("a")В переменной aHColl будет находиться коллекция HTML-элементов <a>.
Полноценный объект ссылки — элемента a — JavaScriptПод индексом 0(ноль) будет лежать та самая единственная ссылка, которую из строки мы превратили в объект. У этого объекта будут работать все ключи, которые присущи HTML-элементу <a>.
Мы без проблем сможем обратиться к ключу href и получить его полный путь:
Переменная aHColl — ключ href определён — JavaScriptМы получили href. Всё работает как надо, а значит мы успешно преобразовали строку в HTML-элемент при помощи JavaScript.
Путь № 2 — Использовать «text/xml»
Вариант с «text/xml» вернёт нам «усечённый» документ (не будет <html><body> и <head>):
var newStrObject = new DOMParser().parseFromString(newStrLink, "text/xml")
Вывод в консоль браузера:
Усечённый документ с одним элементом — JavaScriptИз него также можно будет получить HTML-коллекцию элементов <a>. НО! ВНИМАНИЕ!
Усечённый объект ссылки — элемента a — JavaScript
!!! У этого объекта не будет ключа href.
Переменная aXColl — ключ href НЕ определён — JavaScriptОбъект коллекции не будет содержать нужного количества ключей для своего уникального HTML-элемента.
В результате может пострадать логика обработки таких элементов из строк. Будьте внимательны.
Ссылки
Fetch | Как получить данные? Используем JavaScript
DOM
JavaScript | Строки (String)
Стандарт — DOM — официальный документ
Стандарт — DOM Parsing and Serialization — https://www.w3.org/TR/DOM-Parsing/
HTML/Элемент br
Синтаксис
HTML
XHTML
Описание
Элемент br (от англ. «break» ‒ «ломать, разрывать») осуществляет перевод строки. Данный элемент часто используется при написании стихов, так как в отличии от элемента абзаца элемент перевода строки не создает отступа (если таковой задан) в новой строке.
Поддержка браузерами
Chrome
Поддерж.
FirefoxПоддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| Верс. | Раздел | |
|---|---|---|
| HTML | ||
| 2.0 | Line Break: BR | Перевод |
| 3.2 | BR | |
| 4.01 | 9.3.2 Controlling line breaks Forcing a line break: the BR element… DTD: Transitional
Strict
Frameset | |
| 5.0 | ||
| 5.1 | 4.5.29. The br element | |
| XHTML | ||
| 1.0 | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset | |
1. 1 | Extensible HyperText Markup Language | |
Атрибуты
- clear
- Работа со следующей строкой (обтекание), при наличии плавающего объекта.
- Глобальные атрибуты
- accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент br</title>
</head>
<body>
<h2>Пример с элементом «br»</h2>
<article>
<h3>Стих</h3>
<p>
Умом Россию не понять,<br>
Аршином общим не измерить:<br>
У ней особенная стать —<br>
В Россию можно только верить.
<br>
</p>
<address><b>Ф. И. Тютчев</b></address>
</article>
</body>
</html>
Элемент br
Что такое разрыв строки HTML? (с изображением)
`;
Интернет
Факт проверен
Евгений П.
В языке гипертекстовой разметки (HTML) разрыв строки — это свойство тега или каскадной таблицы стилей (CSS), которое заставляет средство просмотра HTML или веб-браузер немедленно переходить к следующей доступной строке и рисовать следующий элемент, начиная с определенная маржа.
Существует два общепринятых способа вставки разрыва строки HTML в документ. Первый — использовать тег разрыва (BR), заставляющий браузер начинать следующие элементы со следующей строки, выровненные по левой границе. Другой вариант — использовать различные свойства CSS для определения границ, промежутков или интервалов вокруг элементов уровня блока для создания открытого пространства, хотя этот метод не влияет на перенос слов в документе.
Один из принципов дизайна HTML заключается в том, что браузеру обычно разрешается иметь некоторый контроль над макетом веб-страниц. Это позволяет хорошо продуманным сайтам иметь плавный вид независимо от размера дисплея. Когда рисуется абзац, браузер обычно должен найти правильное место для окончания строки, обычно на правом краю блока. Использование неявного разрыва строки HTML прерывает этот процесс.
Использование тега обычно допускается для незначительного форматирования, хотя его использование осуждается как единственный способ определения абзацев в документе. Тег абзаца предпочтительнее для разделения областей текста, потому что он создает блок, которым можно манипулировать с помощью CSS или других тегов, в то время как тег разрыва строки HTML стоит отдельно и не заключает в себе блок. Тег разрыва можно использовать внутри блока абзаца, в основном для того, чтобы браузер не использовал два разрыва между абзацами, что является поведением по умолчанию. Другой метод, используемый для создания разрыва строки, заключается в увеличении размера блока текста с помощью свойств CSS.
Это эффективно расширяет дно контейнера, поэтому после него остается пустое пространство. Это может выглядеть так же, как использование тега разрыва или абзаца, за исключением того, что текст внутри контейнера не изменяется, поэтому перенос слов по-прежнему в значительной степени контролируется браузером.
Одной из областей, в которой может потребоваться указание разрыва строки HTML, является обтекание текстом встроенного изображения. Простой способ создать четко отформатированные абзацы, расположенные сбоку от изображения, — использовать модификатор CLEAR для тега разрыва строки HTML.
Это позволяет указать, должен ли разрыв строки продолжаться как обычно или переходить к следующей доступной строке после изображения. Также можно создать стили CSS, которые будут имитировать это поведение, хотя при определенных обстоятельствах оно может быть не таким гибким.
КАК ПОКАЗАНО НА:
Предварительно рассчитанные разрывы строк для HTML/CSS
Несмотря на медленное улучшение, типографика на веб-страницах имеет значительно более низкое качество, чем высококачественная типографика для печати/PDF, например, производимая L a T e X или Adobe InDesign.
text-wrap , в то же время вводя параметр pretty , который указывает браузеру использовать более качественный алгоритм разрыва строки. Однако на момент написания ни один браузер не поддерживал это свойство. Недавно я наткнулся на библиотеку CSS для эмуляции внешнего вида L a T e X по умолчанию. 1 Однако он не эмулирует алгоритм разрыва строки Кнута-Пласса, что делает L T e X хорошо выглядеть. Это заставило меня задуматься, можно ли эмулировать это с помощью простого HTML и CSS. Библиотека JavaScript уже существует для эмуляции этого, но она добавляет дополнительную сложность и немного замедляет работу.
Оказывается, можно заранее рассчитать разрывы строк и переносы для столбцов определенной ширины таким образом, чтобы их можно было закодировать в HTML и CSS, если веб-шрифты используются для стандартизации внешнего вида текста в различных браузерах.
Ключ в том, чтобы обернуть все потенциальные разрывы строк (вставленные через ::после псевдоэлементов) и дефисы в элементов, которые по умолчанию скрыты с display: none; . Затем медиа-запросы используются для выборочного отображения разрывов строк, характерных для данной ширины столбца. Поскольку каждая строка имеет явный разрыв строки, необходимо включить выравнивание с помощью text-align-last: justify; и интервал между словами: -10px; используется, чтобы избежать дополнительных автоматических разрывов строк из-за небольших различий в форматировании между браузерами. Однако это представляет проблему для фактической последней строки каждого абзаца, поскольку теперь она также выравнивается по ширине, а не по левому краю.
Это решается переносом каждой возможной последней строки в элемент. Используя медиа-запросы, элемент , соответствующий заданной ширине столбца, устанавливается на использование display: flex; , что делает содержимое выравниваемым по левому краю и занимает минимально необходимое пространство, тем самым отменяя выравнивание; межсловный интервал: 0; также настроен на отмену предыдущего изменения и исправление межсловного интервала. К сожалению, вложенные элементы проблематичны, потому что между ними нет пробелов; это исправляется добавлением пробела в HTML-разметку в начале и настройка white-space: pre; , чтобы пробел появился.
Я подготовил демонстрационную страницу, демонстрирующую эту технику. Он был построен путем вычисления разрывов строк в Firefox 76 с использованием букмарклета tex-linebreak и ручной вставки разметки, соответствующей разрывам строк; некоторые исправления были сделаны вручную, потому что библиотека не поддерживает должным образом длинные тире.
Разрывы строк рассчитывались для столбцов шириной от 250 до 500 пикселей с шагом 50 пикселей. Разрывы строк Кнута-Пласса приводят к значительному улучшению внешнего вида текста, особенно для более узких колонок. В дополнение к улучшенным разрывам строк я также реализовал выступающие дефисы, точки и запятые на правом поле, технику микротипографии, которая еще больше улучшает внешний вид. Чтобы (надеюсь) избежать проблем с программами чтения с экрана, aria-hidden="true" устанавливается на добавленную разметку; выбор пользователя: нет; Также установлено значение , чтобы избежать проблем с копированием текста.
Хотя этот метод отлично работает в Firefox и Chrome, он не работает в Safari, поскольку Safari не поддерживает text-align-last начиная с Safari 13. 2 Несмотря на то, что он не работает, соответствующая ошибка WebKit отмечена как «решено исправлено»; кажется, что поддержка действительно была добавлена в 2014 году, но поддержка находится за CSS3_TEXT флаг времени компиляции, который по умолчанию отключен.
Таким образом, я разработал альтернативный метод, который использовал невидимые элементы 100% ширины для принудительного разрыва строки без использования явного разрыва строки. Это снова работало в Firefox и Chrome, хотя вызывало небольшие проблемы с выделением текста, но снова имело серьезные проблемы в Safari. Похоже, что Safari неправильно обрабатывает выровненный текст с отрицательным интервалом между словами; Однако уменьшение интервала между словами вызывает дополнительные разрывы строк из-за различий в форматировании, что нарушает технику. В этот момент я отказался от поддержки Safari и просто настроил его на использование разрыва строки браузера по умолчанию, поместив CSS техники за цифрой 9.0033 @supports запрос для text-align-last: justify .
Автоматическое создание разметки было бы необходимо, чтобы сделать этот метод более полезным, но демонстрационная страница служит доказательством концепции. В идеале браузеры должны реализовать улучшенный алгоритм разрыва строк, что сделало бы этот метод устаревшим.