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字符集并没有规定具体的编码格式。

本文来自投稿,不代表展天博客立场,如若转载,请注明出处:https://www.me900.com/459771.html

(0)

相关推荐

  • 初学者怎么ps汽车海报,竖版海报比例一般几比几

    一、PS制作竖版海报规格: PS软件有海报内置规格,竖版海报尺寸:宽是18英寸,高是24英寸,也就是宽为45.72厘米,高60.96厘米,如果是300像素情况下转换,宽为5400像素,高是7200像素。 如果有AI或者CDR,我推荐这2款软件制作海报设计稿件。 在某宝海报印刷给的制作规格有四个:宽29.7 X 高42.0厘米宽36.5 X 高50.0厘米宽4…

    2023-08-30
  • 武汉有哪些建筑集团(武汉建筑集团:打造城市新地标)

    本文将介绍武汉建筑集团打造城市新地标的实践和成果,重点介绍其在建筑设计、施工管理、工艺创新和社区服务等方面的探索和突破,展示了该集团在建筑行业的领先地位和发展前景。 一、设计创新 1、武汉建筑集团在设计上大力倡导绿色生态理念,通过绿化屋面、立体花境等手段,最大限度地保护城市生态环境,提高建筑使用价值和居住舒适度。 2、以“人性化、智能化、信息化”为设计原则,…

    网站建设 2023-05-08
  • 移动公司怎么吸引客户,移动营业厅销售技巧和话术

    移动营销推广是指以互联网或者移动互联作为主要平台开展的各种营销推广活动,今天八爪网就给大家分享六招移动营销推广的方法,一起来看看吧。 一、利用短信引入老客户 有很多企业在以前的运营中会有许多的老客户,这些老客户主要就是会员,他们都留有手机号,我们可以将这些有手机号的用户转换为微信用户。我们还可以举办一个老客户转来有抽奖的活动,比如说大转盘抽奖,关注抽奖等,我…

    2023-09-06
  • 网络单页如何做(网络单页制作攻略:精简易懂,助你提升网页制作技能)

    网络单页制作攻略是一篇介绍如何制作单页网页的文章,通过精简易懂的语言帮助读者提升网页制作技能。本文从四个方面对这篇文章进行详细阐述,包括网页设计、UI设计、代码实现、SEO优化。 一、网页设计 在设计网页时,要注重用户体验,尽可能简洁易懂。首先要确定页面布局,将重要的内容放在最显眼的位置,保证用户方便查看;另外,颜色搭配也非常重要,要保证网站整体主题和风格的…

    网站建设 2023-05-03
  • 换域名需要多久(新标题:从开始到完成,换域名需要多久?)

    在当今数字化的时代,很多企业或个人可能需要换一个更好的域名或更适合其它产品或服务的域名。但是,换域名并不是一件容易的事情,需要一定步骤和精心安排。本文将详细讨论从开始到完成,换域名需要多久这个问题,以帮助企业或个人更好地规划和执行域名换用计划。 正文: 一、备案新域名的时间和流程 域名申请和备案需要花费的时间和精力是换域名过程中最首要的步骤。在中国大陆其法规…

    网站建设 2023-05-12
  • 如何优化客户 优帮云(优帮云客户体验优化指南)

    本文旨在介绍优帮云客户体验优化指南,通过优化客户体验,提高企业客户的满意度,从而提升企业的品牌形象和业绩。本文分为四个部分分别是:网站导航优化、页面内容优化、交互体验优化和用户反馈优化。 一、网站导航优化 1、导航颜色和大小的搭配。网站导航颜色和大小的搭配直接影响了用户的选择和使用体验,需要保证导航条与网站主题色的协调,同时控制字号大小不宜过小,防止用户在长…

    网站建设 2023-05-19
  • 网页设计怎么提高设计,如何提高网页设计

    在当今数字化时代,网站已经成为一个企业官方形象展示的窗口。不管是大型企业还是小型企业,拥有一个能够展示企业形象、传递信息和吸引用户的高质量网站已经变得至关重要。因此,高端网站定制设计成为企业发展中不可或缺的一环。 高端网站定制设计是指根据企业的特性、需求和目标制定的独特网站设计方案。与模板式网站设计相比,高端网站定制设计更加符合企业的个性化要求,能够突显企业…

    2023-08-30
  • 16px等于多少em(响应式网页设计中的16px与em转换方法)

    本文将介绍响应式网页设计中的16px与em转换方法,这种转换方法在设计响应式网页时非常实用。本文将从以下四个方面详细讨论这种转换方法: 一、em和px的区别 em和px都是常用的长度单位,它们之间的主要区别在于em是相对单位,而px是绝对单位。em的大小是根据父元素字体大小来计算的,而px是固定的像素大小。因此,当用户调整浏览器窗口大小时,px单位的元素大小…

    网站建设 2023-05-04
  • 成都 西安 互联网公司有哪些(「互联网公司排名:成都西安实力最强企业一览」)

    本文介绍了「互联网公司排名:成都西安实力最强企业一览」,从产品、人才、投资和口碑四个方面进行了详细阐述,列出了排名前十的企业,并分析了这些企业的优劣与特点。 一、产品实力 在产品实力方面,排名前三分别是阿里巴巴、腾讯和百度。 首先,阿里巴巴引领了电商行业的风向,旗下淘宝和天猫成为了中国最大的电商平台。 其次,腾讯拥有微信和QQ两个超级应用,覆盖了超过十亿的用…

    网站建设 2023-05-06
  • 网站个人备案审查不符,免关站备案过审方法及教程

    今天有会员铁子遇到问题,网站是在腾讯云备案的,并且是个人备案,腾讯云备案审查被抽查,提示网站标题与备案标题不符,并且个人备案不能有交互性,不能有任何盈利性质,不能含有企业信息,需要修改网站符合个人备案标准,否则就取消备案。 其实这个问题挺常见的哈,不管是备案抽查还是新增备案都是需要的,不管是阿里还是腾讯,每年基本上都会抽查两次,经常有很多朋友被取消备案。 那…

    2022-08-25
  • 预定型网站有哪些(预订旅游网站排行榜及攻略:最受欢迎的预订旅游网站及成功的预订技巧!)

    随着互联网的快速发展,越来越多的人开始使用在线旅游预订网站来计划和预订旅行。在这个日益竞争激烈的市场中,哪些网站才是最受欢迎的呢?本文将介绍最受欢迎的预订旅游网站排行榜,以及成功的预订技巧。 正文: 一、预订旅游网站排行榜 1. Booking.com Booking.com是世界上最大的在线旅游预订网站之一。它提供了超过290多个国家和地区的住宿预订,包括…

    网站建设 2023-05-11
  • 商城网站有哪些功能(全方位商城网站功能详解:满足你所有购物需求)

    随着互联网的发展,越来越多的人开始选择在商城网站上购物,这种趋势越来越明显。全方位商城网站为购物者提供了各种各样的商品和服务,以及方便、快捷、安全的购物体验。本文将从四个方面详解全方位商城网站的功能,旨在帮助读者更好地了解全方位商城网站,提高购物体验。 一、商品展示 1、页面设计:全方位商城网站通常采用非常直观和易于导航的页面设计,使用户可以很容易地找到所需…

    网站建设 2023-05-14