在 IE 中将“<”和“>”作为元素属性值的一部分进行转义

Escape "<" and ">" as part of element attribute value in IE

本文关键字：属性 一部分 转义 元素 中将 IE      更新时间：2023-09-26

我想在元素属性中转义">"和"<"，不幸的是我无法弄清楚。看起来默认情况下，IE outerHTML 正在转义 & 字符，一旦我尝试转义">"（将">"替换为"amp+gt;"），作为"amp+gt;"一部分的 & 符号再次被转义。下面是一个示例代码：

        var div = '<div atr="test & and < and >"></div>';            
        var $el = $(div);
        console.log("txt string: " + div);
        console.log("$el outerHTML BEFORE escaping: " + $el[0].outerHTML);
        var rgx = new RegExp(">", "g");
        $el.attr("atr", $el.attr("atr").replace(rgx, "&gt;"));
        console.log("$el outerHTML AFTER escaping: " + $el[0].outerHTML);

这是此代码的输出：

txt string: <div atr="test & and < and >"></div>
$el outerHTML BEFORE escaping: <div atr="test &amp; and < and >"></div>
$el outerHTML AFTER escaping: <div atr="test &amp; and < and &amp;gt;"></div>

正如人们所看到的，& 符号是更大然后转义的一部分再次被转义。基本上我需要的是：

<div atr="test &amp; and < and &gt;"></div>

你能让我知道这里可能缺少什么以及如何解决这个问题吗？

谢谢。

只需使用 .attr 方法设置属性，内容将自动转义：

> $('<div>').attr('foo', '<>')[0].outerHTML
"<div foo="&lt;&gt;"></div>"

注意：这就是为什么使用jQuery方法来修改元素而不是字符串连接的原因之一。

相关文章：