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)

相关推荐

  • 公司网页设计多少钱(公司网页设计费用详解:网页设计价格、流程、制作周期等)

    在现代商业社会中,网页设计日益成为企业竞争的重要环节。本文从网页设计价格、流程、制作周期等四个方面对公司网页设计费用进行详解,并提供相应的背景信息,旨在帮助读者更好地了解网页设计的整个过程。 正文: 一、网页设计价格 网页设计价格通常由设计师的工作时间、使用的软件和工具、网站复杂度等因素组成。设计师在设计过程中所花费的时间和工作经验越多,网页设计价格就越高。…

    2023-05-21
  • 系统不支持curl,系统不支持请求的命令

    《当系统不支持curl时:探索背后的原因与应对之策》 在进行网络开发或系统管理的过程中,我们可能会遇到各种各样的问题,其中“系统不支持curl”就是一个较为常见的情况。curl作为一种广泛使用的命令行工具,用于传输数据或与网络服务进行交互。当系统不支持curl时,可能会给我们的工作带来一些不便,那么这究竟是怎么回事呢?接下来,我们将深入探讨这个问题。 一、c…

    2025-10-11
  • http 403 禁止,http403禁止访问解除办法

    《关于“http403禁止”的深入探究》 一、“http403禁止”的基本概念也许在互联网的世界中,“http403禁止”就像是一扇紧闭的大门。当我们在浏览器中输入一个网址并尝试访问时,如果遇到了http403错误,就好像我们走到了这扇大门前,却被无情地拒绝进入。它代表着服务器对我们的访问请求做出了禁止的决定。 我们可以把这个过程想象成去一个图书馆借书,图书…

    2025-10-09
  • 如何删除 百度收录(如何有效删除自己网站在百度的收录记录?)

    百度作为国内最大的搜索引擎之一,对于网站的收录记录非常重要。但是,当我们不想让一些网页再次被百度搜索到,或者决定将网站删除,我们希望这些网页或网站能够被彻底删除。本文将讲解如何有效删除自己网站在百度的收录记录? 正文: 一、提交删除请求 1、网站主动推送删除请求 百度搜索平台支持网站主动推送url的add/del操作。如果网站认为某些链接需要删除,可以通过a…

    2023-05-02
  • 后台代码如何修改(代码修改为中心,提高项目安全性与稳定性【标题字数符合要求】)

    本文主要讨论代码修改为中心,提高项目安全性与稳定性,并阐述其重要性。首先,介绍了进行代码修改的原因和背景;其次,从代码评审、测试、更新和维护等四个方面阐述如何进行代码修改,以提高项目安全性和稳定性;最后,总结了文章的主要观点和结论。 一、代码评审 代码评审是通过检查代码保证代码的质量,其目的是早期发现代码中的缺陷,从而降低后期修复缺陷的成本。在代码评审过程中…

    2023-05-07
  • dns解析方法有哪些(DNS解析方法大全:详解多种DNS解析技术及优缺点)

    DNS解析作为互联网传输协议中的关键环节,其质量和速度直接影响着用户的访问体验。本文将详细介绍多种DNS解析技术及其优缺点,以帮助读者更好地理解DNS解析的工作原理和优化方法。 一、递归解析与迭代解析 DNS解析的基本原理是将域名转换成IP地址。其中,递归解析和迭代解析两种方式是最常见的。递归解析是指DNS客户端发送请求到本地DNS服务器,如果本地DNS服务…

    2023-05-01
  • 淘宝人气店铺怎么做,淘宝店铺多久能做起来

    淘宝人气店铺,听起来就很厉害对吧? 但你知道吗,大多数所谓的”人气店铺”,都是熬出来的。 不是一天两天,也不是一个月两个月。 我看过太多新手,开店第一个月就想月入过万。 结果呢? 三个月后,店铺还在,人已经放弃了。 为啥? 因为他们不懂淘宝的游戏规则。 以为上架就能卖,卖就能赚钱。 太天真了。 淘宝人气店铺到底是啥样的 淘宝官方有个定…

    2026-05-24
  • 网购十大男装品牌有哪些,网上买男装品牌推荐和选购攻略

    我有个朋友,前阵子在网上买了件”原单”阿迪达斯T恤,收到货一看,水洗标是乱码的,面料硬得能立起来,穿了两次领口就松成海碗。他捶胸顿足:网购男装也太容易踩坑了吧! 其实不是网购的问题,是太多人根本不知道怎么选。我做服装这行快8年,踩过的坑比你吃过的饭还多。今天就把这10大男装品牌的底细全部摊开,手把手教你怎么在网上买到称心如意的男装。 …

    2026-06-14
  • 农村做淘宝的优势和方法,乡村振兴背景下的电商创业指南

    # 农村做淘宝的优势和方法,乡村振兴背景下的电商创业指南 ## 引言 随着电商行业的快速发展,农村淘宝已经成为越来越多卖家关注的重点。在这个竞争激烈的市场中,如何农产品电商,如何乡村振兴,是每个卖家都需要思考的问题。本文将深入分析农村创业,提供详细的特色产品指南,帮助你在电商领域取得成功。 ## 现状分析 ### 当前市场情况 **市场规模:**1. **总…

    2026-06-08
  • 淘宝时尚男装店铺哪家好,男装店铺怎么选才不踩坑

    很多男生买衣服,都有选择困难症。淘宝上的男装店铺成千上万,价格从几十块到几万块不等,质量也是参差不齐。很多人随便找一家店铺下单,结果买回来的衣服,要么质量差,要么版型不对,要么和图片完全不一样。今天我就给大家讲讲,淘宝上的时尚男装店铺怎么选,怎么才能不踩坑。 先搞清楚自己的需求,不要盲目跟风 很多人选店铺,喜欢看别人推荐。别人说这家店好,他就去买;别人说那个…

    2026-06-03
  • 唯品会 团购怎么抢 – 唯品会 团购实战记录

    兄弟们,好久不见,见字如面。 今天跟大家聊聊唯品会 团购这件事。 先说结论 唯品会 团购这事儿,靠谱,但有前提条件。 我前前后后用了 3 个月,整体感受是:功能方面没问题,服务方面要注意。 实测感受 我前前后后用了 3 个月,整体感受是:靠谱的点有几个,要注意的点也有几个。 靠谱的点:功能稳定,服务到位,售后有保障。 我用了 3 个月,没出过啥大问题。 要注…

    2026-05-03
  • 旺旺号是什么?首先聊这个问题

    首先聊一下旺旺号是什么的问题。 这个问题问的人挺多的。 我今天给大家详细讲一讲。 第 1 种:旺旺号的定义 旺旺号,就是你在淘宝的账号。 你注册淘宝的时候,填的那个用户名。 可以用来登录淘宝、天猫、闲鱼。 也可以用来跟卖家聊天。 第 2 种:旺旺号长什么样 旺旺号可以是: 手机号(现在默认用手机号) 自定义用户名(早期注册的) 邮箱(最早期的注册方式) 我的…

    2026-05-27