html中汉字乱码怎么解决,如何解决前端页面中文乱码

场景说明

假设需要劫持http响应并在html页面中注入一段js代码后再传回浏览器,实现在浏览器出现一个弹框消息提醒。

 

由于原始html页面编码格式存在UTF-8、GBK等多种编码格式,如果注入的js包含中文消息的话,那么在UTF-8或GBK编码的页面就会有一个出现乱码。有没有办法做到不管是针对GBK、UTF-8编码的页面都能做到正常显示而不会出现乱码哪?

产生乱码的原因

首先来分析一下产生乱码的原因,我们在浏览器看到的信息都是通过图形学手段在显示器上呈现出来的,而实际保存在计算机硬件上的都是0和1(因为计算机实现是基于二进制),那么计算机要显示、传递信息就需要依靠一套规则把一串串的0和1识别为正确的字符,这就是编码。

例如01000001在ASCII编码规则下对应字母A。相同的0/1串,不同的编码解析出的字符一般是不同的,因此如果html页面按照UTF-8的编码解析正常,那么按照GBK的编码解析就会是乱码了。根据上面的示意图,假设注入的js代码为utf-8编码格式,而原始html编码格式也为UTF-8编码格式,那么最终注入这部分中的中文就能正常显示,但是如果原始html为GBK编码,那注入的这部分js代码的中文就会显示乱码。

解决办法

有一种unicode统一编码字符集,目标是把所有文字、字符统一编码,也就是一串0/1组合在unicode字符集下对应的字符是唯一的,不会存在歧义。而js是支持解析unicode字符的,那么就可以在注入js中把要显示的消息统一转换为unicode编码,浏览器端去解析这个unicode编码,这样不管原始html是UTF-8还是GBK,都能正常显示中文。

原始注入js代码关于中文字符的部分

// utf-8编码格式
let message = "中文";

解决乱码的注入js代码关于中文字符的部分

// utf-8编码格式
let message = "\\u4e2d\\u6587";  // 这个编码对应上面的message"中文"

注意:

  1. 注入的js代码仍然是utf-8编码格式,只是消息内容转换为unicode编码的形式;
  2. unicode中0x4e2d表示的0/1串对应汉字”中”,0x6587对应的0/1串对应汉字”文”;
  3. message其实也不是真正的unicode编码,它只是普通的字符串,只是使用了unicode对应的码点(也就是二进制对应的数值),因为可以利用这个码点在浏览器中恢复出正确的字符,事实上unicode字符集并没有规定具体的编码格式。
本站部分内容由互联网用户自发贡献,该文观点仅代表作者本人,本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如发现本站有涉嫌抄袭侵权/违法违规等内容,请联系我们举报!一经查实,本站将立刻删除。

(0)

相关推荐

  • ps做gif时间轴怎么变慢,智能对象如何使用

    1,巧用智能对象利用技巧,PS时间轴可以做更多相对复杂的动画,而这些动画的实现更多的是利用智能对象实现。 4,导出动画PS导出大型gif动画需要占用电脑很大的内存,对于分辨率很大,或者帧数太多,可能会弹出未知错误的提示框,也就是内存不足,然而就算你加到16G,有时候还会无法导出。这个时候我们必须妥协,降低百分比(缩小分辨率)。如果你做的动画有2700px宽度…

    2023-08-27
  • 品牌营销怎么宣传产品,品牌宣传推广方案

    随着互联网技术发展的成熟,使得企业与受众间信息交换更为流畅便利。 除了传统对线下品牌推广的重视,企业越来越注重线上品牌推广的影响力,与消费者建立起长期良好的关系。那么线上品牌推广该怎么做呢?线上品牌推广是指通过互联网等的线上渠道,将企业的产品和服务信息传递给目标受众,以提高知名度,激发和强化其购买动机而采取的一系列推广活动。1. 推广主体 线上品牌推广主体是…

    网站建设 2023-09-07
  • disuczx3.2发帖如何插入html视频(HTML视频插入教程:让你的帖子更丰富多彩)

    本文介绍了如何在HTML中插入视频,使你的帖子更加丰富多彩,为读者提供了背景信息,引发了读者的兴趣。 一、准备工作 在插入视频之前,需要做一些准备工作。首先,确保你的视频格式是支持HTML5的,如MP4、WebM和Ogg。其次,将视频文件保存在你的网站根目录下的某个地方,这样才能在HTML中正确引用视频。 一旦你的准备工作完成,你就准备好插入视频了。 二、使…

    网站建设 2023-05-02
  • 免费申请云主机,免费云服务器申请推荐

    阿贝云 我明白 logo 形状的意思是像云,但这真的很像一个很短的牛子。 网址:www.abeiyun点com 阿贝云【ABY】领先的云服务器、虚拟主机、免费空间、免备案域名注册服务商! 免费方法:手机号注册 → 关注微心公众号 → 绑定微心公众号 → 实名认证 → 选择虚拟主机/云服务器 免费条件: 1.关注公众号 2.实名认证,实名认证需要缴纳 0.3 …

    2022-04-19 投稿
  • dede如何上传(上传dede模板教程:步步为营,轻松掌握!)

    dede模板是一种常用的网站模板,学习上传dede模板可以让你在网站建设方面变得更加熟练。本文将以步步为营的方式,为大家详细介绍上传dede模板的方法。 正文: 一、下载并解压dede模板 首先,我们需要从网络上下载dede模板,并解压到本地文件夹。一般情况下,我们可以从主题市场或者论坛中找到自己喜欢的dede模板,并付费下载。解压后,我们就可以看到模板包含…

    网站建设 2023-05-15
  • 怎么找学校的企业微信,如何搜索学校企业微信

    一、为什么用企业微信建立学校组织,实施学校工作信息化? 1,因为“微信”几乎是每一台手机上都有的APP,用户无需另外下载安装APP。(使用老人机的、爷爷奶奶辈的用户除外) 2,“微信”是使用率最高的手机应用,几乎人人离不了。 在手机上,微信大家天天看吧,无论是沟通信息,扫码支付,大家的生活都离不开吧,很少有人一天都不打开微信,看一看吧? 3,学校开通“企业微…

    2023-08-27
  • 哪些浏览器支持canvas(浏览器必备!Canvas实现的完美效果,让你的网页更加生动!)

    作为当今互联网时代的重头戏,网页显示效果越来越成为网站开发者和用户所关注的问题。Canvas是一个HTML5元素,通过它可以实现画布的绘制和渲染,为网站添加生动的效果。本文将从四个方面详细阐述浏览器必备!Canvas实现的完美效果,让你的网页更加生动!。 一、Canvas基础知识 Canvas元素是HTML 5新增的重要元素之一,它可以在页面上实现动态渲染效…

    网站建设 2023-05-07
  • 直播推广是怎么推广的,直播间怎么引流呢

    随着互联网的快速发展,越来越多的企业和品牌开始通过网络平台进行宣传和营销。其中,快手直播间作为目前最受欢迎的直播平台之一,已经成为了很多品牌进行推广的重要渠道之一。那么,免费活码二维码生成器在快手直播间引流推广中的具体作用是什么呢? 免费活码二维码生成器的作用是帮助企业或品牌在快手直播间中实现二维码的自动生成和展示。通过免费活码二维码生成器,企业或品牌可以在…

    2023-09-06
  • 如何拓展网络销售(拓展网络销售的7个独门妙计)

    本文介绍了拓展网络销售的7个独门妙计,涵盖从产品推广到营销策略的方方面面。如果你正在寻找新的方法来加强你的网络销售,本文将为你提供宝贵的帮助。 一、产品优化 1、优化商品图像:互联网时代的购物体验越来越注重画面和色彩的表现,商品的图像也是该领域最重要的一环。 2、进行客户反馈:采纳用户需求,对产品进行改进改良,优化购物体验。 3、提高商品质量:提高产品的品质…

    网站建设 2023-05-06
  • 如何在网页中添加百度地图(在网页中如何添加百度地图:实现地图中心定位的方法)

    本文将介绍如何在网页中添加百度地图以实现地图中心定位。针对该问题,本文将从以下四个方面进行详细阐述: 一、使用JavaScript API添加百度地图 1、介绍如何使用JavaScript API添加百度地图。 2、详细说明百度地图JavaScript API的相关参数和属性。 3、举例说明JavaScript API的使用场景,如在web应用中添加地图的方…

    网站建设 2023-05-04
  • 如何制作2微码(从零开始:轻松掌握2维码制作技巧)

    随着现代科技的发展,二维码已经成为各个领域不可或缺的一部分。本文将介绍如何轻松制作二维码,以及二维码的基本原理和应用范围。通过阅读本文,读者可以轻松掌握二维码的制作技巧。 一、二维码的定义和基本原理 二维码,又称QR码,是一种使用黑白像素来编码信息的图形。它可以包含文本、链接、图片等各种类型的信息,在商业、广告、个人信息交换等场合有着广泛的应用。二维码可以使…

    网站建设 2023-05-05
  • 如何绑定顶级域名(绑定顶级域名,轻松搭建个人网站:高效、易用、稳定)

    现如今,个人网站已经成为许多人表达自我的方式之一,而绑定顶级域名是搭建个人网站中重要的一环。本篇文章将介绍绑定顶级域名的方法、它的优点以及一些具有稳定性的顶级域名。它将有助于读者快速了解如何轻松搭建自己的个人网站。 正文: 一、为个人网站选择合适的顶级域名 在搭建个人网站之前,首先要选择一个合适的顶级域名。顶级域名是完整域名中最后一个部分,如.com、.ne…

    网站建设 2023-05-12