jquery - 如何使用 Jquery 获取 HTML 标签的完整定义？

问题描述

要在 JQuery 中获取标签名称，我们使用：

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

这将返回标签名称，例如“DIV”、“TABLE”

除了遍历元素并获取每个属性的值之外，如何获取具有所有属性的整个标记定义？我需要定义的文本。例如：

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

给定任何元素的 CSS 选择器，我想以字符串形式获取：

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

输出字符串中属性的顺序并不重要。

标签： jqueryhtmlcss

一种选择是检查元素的，并将与outerHTML匹配：<>

const openingHtmlTag = $('#myDiv')[0]
  .outerHTML
  .match(/<[^>]+>/)[0];
console.log(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.log(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.log(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>

jquery - 如何使用 Jquery 获取 HTML 标签的完整定义？

问题描述

解决方案

推荐阅读