文章/答案/技术大牛

发布

使用jQuery html()时在html中显示的特殊字符

jQuery html() 方法中特殊字符的处理

基础概念

html() 方法是 jQuery 中用于获取或设置元素 HTML 内容的方法。当使用它来设置内容时，如果内容中包含特殊字符（如 <, >, &, ", ' 等），可能会遇到显示问题。

问题原因

HTML 实体编码：特殊字符在 HTML 中有特殊含义，需要被转义为 HTML 实体才能正确显示
XSS 防护：浏览器会自动转义某些字符以防止跨站脚本攻击
双重编码：如果内容已经被编码过一次，再次编码会导致显示异常

解决方案

1. 使用 text() 方法代替

如果不需要 HTML 标签，只是显示文本内容：

$('#element').text('This is <b>bold</b> & special');

2. 手动转义特殊字符

function escapeHtml(text) {
  return text.replace(/[&<>"'`]/g, function(match) {
    return {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;',
      '`': '&#x60;'
    }[match];
  });
}

$('#element').html(escapeHtml('This is <b>bold</b> & special'));

3. 使用 DOM 方法创建元素

var text = document.createTextNode('This is <b>bold</b> & special');
$('#element').empty().append(text);

4. 使用 jQuery 的 parseHTML 方法

var str = 'This is <b>bold</b> & special';
$('#element').html($.parseHTML(str));

应用场景

用户输入显示：显示用户提交的内容时防止 XSS 攻击
动态内容生成：从 API 获取数据后显示在页面上
模板渲染：在客户端渲染模板时处理特殊字符

注意事项

如果内容中包含需要保留的 HTML 标签，简单的转义会破坏这些标签
对于富文本内容，需要更复杂的处理或使用专门的库（如 DOMPurify）
性能考虑：频繁的字符串操作可能影响性能，对于大量数据应考虑其他方案

示例代码

// 保留 HTML 标签但转义特殊字符
function safeHtml(html) {
  var div = document.createElement('div');
  div.textContent = html;
  return div.innerHTML;
}

// 使用示例
var userContent = '<script>alert("XSS")</script> & <b>bold</b>';
$('#output').html(safeHtml(userContent));

以上方法可以根据具体需求选择使用，确保特殊字符正确显示的同时保持应用的安全性。

使用jQuery html()时在html中显示的特殊字符

jQuery html() 方法中特殊字符的处理

基础概念

问题原因

解决方案

1. 使用 text() 方法代替

2. 手动转义特殊字符

3. 使用 DOM 方法创建元素

4. 使用 jQuery 的 parseHTML 方法

应用场景

注意事项

示例代码

相关·内容

零售企业如何提升数字安全免疫力，实现降本提效？

个人团队都好用，CODING DevOps前后端项目实践

小游戏（厦门站）

“小程序·云开发” 北京站

小游戏（上海站）

WeGeek微信小程序敏捷开发实战（北京站）

小游戏（杭州站）

从容应对高并发——API网关缓存熔断实战分享

小游戏（北京站）

技术引领实践，云存储带你玩转微信小程序

小游戏（成都站）

小游戏（长沙站）

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐