如何通过JavaScript和jQuery获取元素的原始转义HTML属性值？

算力阿峰

2026-8-13

获取HTML元素属性的原始转义值问题

页面中有如下div元素：

<div class="myDiv" id="&lt;script&gt;alert(1)&lt;/script&gt;"></div>

使用jQuery的$('.myDiv').attr('id')只能得到解码后的<script>alert(1)</script>，但我需要获取原始的转义字符串<script>alert(1)</script>，以此判断该HTML是否被转义，请问用JavaScript或jQuery怎么实现？

解决方案

通过DOM元素的outerHTML属性获取完整原始HTML代码，再用正则提取id属性的原始值：

// 原生JS实现
const targetDiv = document.querySelector('.myDiv');
const elementHTML = targetDiv.outerHTML;
const idRawValue = elementHTML.match(/id="([^"]+)"/)?.[1];
console.log(idRawValue); // 输出 &lt;script&gt;alert(1)&lt;/script&gt;

或者用jQuery结合原生属性：

// jQuery结合原生属性
const targetDiv = $('.myDiv')[0];
const elementHTML = targetDiv.outerHTML;
const idRawValue = elementHTML.match(/id="([^"]+)"/)?.[1];
console.log(idRawValue);

原理：attr()方法会自动解码HTML实体，而outerHTML保留了元素在页面中的原始HTML代码（包括未解码的转义字符），因此可以通过正则匹配提取出id属性的原始转义值。
适配说明：如果元素的id属性使用单引号包裹，可将正则调整为/id=['"]([^'"]+)['"]/，兼容单双引号两种写法。