Как получить полное определение тега HTML с помощью Jquery?

Чтобы получить имя тега в JQuery, мы используем:

     $(someCssSelector).prop('tagName');

Это возвращает имя тега, например. 'ДЕЛ', 'ТАБЛИЦА'

Как получить полное определение тега со всеми атрибутами, кроме перебора элемента и получения значения каждого атрибута? Мне нужен текст определения. Например:

<div id = "myDiv" style = "...." title = "....">....</div>

Учитывая селектор CSS для любого элемента, я хочу получить в виде строки:

<div id = "myDiv" style = "...."  title = "....">

Порядок атрибутов в выходной строке не важен.

jquery html css

28.07.2019 05:44

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Один из вариантов — проверить outerHTML элемента и сопоставить < с >:

const openingHtmlTag = $('#myDiv')[0]
  .outerHTML
  .match(/<[^>]+>/)[0];
console.info(openingHtmlTag);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id = "myDiv" style = "color:green" title = "foobar">content<div>

Или, в несколько необычном случае, когда свойство атрибута может содержать >s и экранированные кавычки, необходимо расширить регулярное выражение:

const re = /^<(?:[^'">]*|(['"])(?:\\.|(?!\1).)*\1)+>/s;
const openingHtmlTag = $('#myDiv')[0]
  .outerHTML
  .match(re)[0];
console.info(openingHtmlTag);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id = "myDiv" style = "color:green" title = "foobar">content<div>

https://regex101.com/r/OBNoBa/1

^<(?:[^'">]*|(['"])(?:\\.|(?!\1).)*\1)+> означает:

^< — начало строки, за которым следует < (начало открывающего тега)
(?:[^'">]*|(['"])(?:\\.|(?!\1).)*\1)+ - Повторить 1+ раз:
- [^'">]* - Все, кроме кавычек или закрывающей скобки, ИЛИ:
- (['"])(?:\\.|(?!\1).)*\1 Атрибут в кавычках:
- (['"]) — Разделитель открывающей строки, первая группа захвата. Затем повторно сопоставьте либо:
  - \\. - Любой экранированный символ (это позволяет, например, сопоставить \', а не интерпретировать ' как разделитель закрывающей строки), ИЛИ
  - (?!\1). — что угодно, кроме разделителя строк
- \1 - снова разделитель строк (конец атрибута в кавычках)
> - Закрытие открывающего тега

Другим вариантом может быть поверхностное клонирование узла (таким образом, опуская все его дочерние элементы), взять его outerHTML и удалить закрывающий тег (что намного проще сопоставить):

const re = /^<(?:[^'">]*|(['"])(?:\\.|(?!\1).)*\1)+>/s;
const cloned = $('#myDiv')[0].cloneNode(false);
const html = cloned.outerHTML.replace(/<\s*/\w+\s*>$/, '');
console.info(html);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id = "myDiv" style = "color:green" title = "foobar">content<div>

Более полного и совершенного ответа ожидать нельзя!

— 28.07.2019 06:32

28.07.2019 05:47