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

Question

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

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

这将返回标签名称，例如'DIV', '表格'

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

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

给定任何元素的 CSS 选择器，我想得到，作为字符串:

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

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

Answer 1

一个选项是检查元素的 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>