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)

相关推荐

  • 宏基4741g网卡驱动,宏碁网卡驱动

    《宏基4741g网卡驱动:从困惑到理解》 一、宏基4741g及其网卡驱动的基本介绍宏基4741g可能是一款在市场上有一定影响力的笔记本电脑型号。它的网卡驱动呢,就像是电脑网络连接的关键钥匙,没有它,电脑也许就无法正常连接到网络,获取各种在线信息和服务。就好像我们出门没有带钥匙,就进不了家门一样,网卡驱动对于宏基4741g来说至关重要。 二、常见的宏基4741…

    网站建设 2025-08-05
  • 上传mp3,上传mp3的软件

    以下是一篇关于“上传mp3”的文章: 一、上传mp3的基本概念 可能很多人都对上传mp3这个操作并不陌生,也许在日常使用各种电子设备或在线平台时,都曾有过这样的需求。我觉得上传mp3就像是把我们喜欢的音乐或者其他音频文件从自己的设备“搬运”到一个公共的或特定的空间里。 比如说,我们可以把自己录制的歌曲、喜欢的广播节目,甚至是一些音频讲座等上传到云存储平台,这…

    2025-12-22
  • 彗星dns优化,彗星dns优化器(fast dns)

    《彗星DNS优化:探索网络连接的新路径》 在当今数字化的时代,网络已经成为我们生活中不可或缺的一部分。而DNS(域名系统)作为网络连接的重要组成部分,其优化对于提升网络性能和用户体验具有重要意义。近年来,彗星DNS优化技术逐渐受到关注,它似乎为我们打开了一扇通往更快速、更稳定网络的大门。那么,彗星DNS优化究竟是什么?它是如何工作的?又能给我们带来哪些实际的…

    2025-12-29
  • 刷新闪屏,刷新率闪屏

    《关于“刷新闪屏”问题的深入探讨》 一、刷新闪屏现象的初步认识 在我们日常使用各种电子设备的过程中,也许会时不时地遇到刷新闪屏的情况。这似乎是一个比较常见但又让人有些困扰的问题。我觉得刷新闪屏就像是电子设备在运行过程中突然出现了一阵“小混乱”,屏幕上的画面会短暂地闪烁或者出现异常的刷新现象。 也许不同类型的电子设备出现刷新闪屏的表现形式会有所不同。比如在手机…

    2025-09-12
  • 联想键盘驱动,联想键盘驱动在哪里

    《关于联想键盘驱动的深入探讨》 一、联想键盘驱动的重要性我觉得联想键盘驱动在电脑系统中好像是起着至关重要的作用呢。它就像是一座桥梁,将电脑的操作系统与键盘紧密地连接在一起。没有这个驱动,也许键盘就无法正常工作,就像一辆汽车没有发动机一样,根本无法启动。我们在使用电脑时,频繁地敲击键盘输入各种信息,如果键盘驱动出现问题,那可就麻烦了,可能会导致键盘失灵,无法输…

    网站建设 2025-10-18
  • 外贸谷歌怎么用 外贸谷歌使用指南

    外贸谷歌,是指在谷歌搜索引擎上进行外贸相关搜索的行为。随着全球市场的融合,越来越多的生产商和贸易商都开始把目光投向国际市场,而外贸谷歌就成为了他们不可或缺的工具。本文将针对外贸谷歌使用指南,从四个方面做详细阐述。 一、关键词部署与精细过滤 外贸谷歌的搜索结果非常庞大,因此在使用之前,需要先确定关键词。外贸专业的公司或个人,一般都会根据所在的行业,制定一份比较…

    网站建设 2023-05-16
  • 如何在阿里云搭建服务器(在阿里云轻松搭建高效服务器)

    近年来,阿里云成为了云计算行业的领军企业,其强大的技术和优质的服务使得越来越多的企业选择在阿里云上搭建服务器。本文章就是为了介绍如何在阿里云上轻松搭建高效服务器,并解释其重要性。 一、选择云服务器类型 在阿里云上搭建服务器时,首先需要根据自身的需求选择一款适合的云服务器类型。阿里云提供的云服务器包括按量付费与包年包月两种类型,用户可以根据自身业务情况选择适合…

    网站建设 2023-05-09
  • 怎么搜音标查单词,如何查音标翻译单词

    dictionary.com是一个在线词典网站,作为一个英语学习者来说,需要有好的英英词典,才能更快地建立英语思维,提高英语水平,这时候,dictionary.com是其中一个比较好的选择。   但是,dictionary.com默认使用的并不是一般我们常见的国际音标体系,而是使用了自己的一套比较特殊的音标标记体系。例如,我们查询单词“umbrel…

    2023-08-29
  • 和英文怎么写单词,和的英语高级表达

    英语中表达“和”的意思,常见的有两个词,and和 with.   下面请看这两个句子: I like sports, such as football、basketball and volleyball. 2.The teacher ,with some students,is standing there. 刚才的两个句子中都有连接词,它们是an…

    2023-08-27 网站建设
  • write函数,analogwrite函数

    以下是一篇关于“write函数”的文章: 《关于write函数的探索与思考》 一、write函数的基本概念 write函数可能是在编程领域中较为常见的一个函数。我觉得它的主要作用也许是用于将数据写入到某个特定的输出流中,比如文件或者控制台等。就好像是一个管道,我们可以通过它将需要输出的信息传递出去。 在很多编程语言中都有类似write函数的存在,它为开发者提…

    2025-12-29
  • 如何挖掘关键词(如何用关键词挖掘出更多的搜索量?)

    本篇文章主要探讨如何用关键词挖掘出更多的搜索量。随着互联网的快速发展,关键词营销已成为各大企业营销必不可少的一部分。本文将从关键词优化、竞争分析、长尾关键词和用户搜索行为四个方面详细阐述如何用关键词挖掘出更多的搜索量。 一、关键词优化 关键词优化是指通过研究用户搜索行为、分析市场竞争及网站数据等手段,确定适当的关键词,并将其合理地布置在网站中。通过关键词优化…

    网站建设 2023-05-06
  • 如何申请一个免费的网站空间(申请免费网站空间:从零开始拥有自己的网站)

    本文将介绍如何申请免费网站空间,帮助读者从零开始拥有自己的网站,为读者提供背景信息和引入兴趣。 一、选择适合你的平台 在申请免费网站空间之前,你需要选定一个适合自己的网站平台,比如 Wix、WordPress、Blogger 等,这些平台都有提供免费的服务,并且具有自己的优点和缺点。 在选择平台时需要考虑你的需求,比如是否需要更多的创意和自由度,还是更看重平…

    网站建设 2023-05-08