解決JS外部文件中文注釋出現(xiàn)亂碼問題
問題描述
中文亂碼在Java Web開發(fā)中經(jīng)常出現(xiàn),這是由于不同的部分編碼不一樣造成的,一般在開發(fā)中,我們把所有能設(shè)編碼的地方,全部設(shè)置成UTF-8,但是有時(shí)候還是會(huì)出現(xiàn)亂碼的情況。在開發(fā)中,一般把js代碼從html中抽出來,放到一個(gè)js文件中,js文件中包含中文,在瀏覽器中頁面沒有出現(xiàn)亂碼,一切正常,當(dāng)我們打開源碼點(diǎn)進(jìn)js文件,我們發(fā)現(xiàn)js文件中的中文注釋和js代碼中的中文全是亂碼。
問題原因
我們沒有告訴瀏覽器,當(dāng)前的文件使用何種編碼,瀏覽器默認(rèn)使用的的GBK編碼,但是我們js文件使用的UTF-8的編碼,當(dāng)然會(huì)出現(xiàn)亂碼了,有的同學(xué)會(huì)問了,為什么頁面沒有出現(xiàn),那是因?yàn)槲覀冊(cè)陧撁胬锩婕由弦韵麓a:
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
或者:
<meta charset="utf-8">
這就告訴了瀏覽器,你用UTF-8來渲染這個(gè)頁面,我們這個(gè)頁面是用UTF-8來編碼的,這個(gè)時(shí)候就是正常顯示的?;蛘呤窃贘ava代碼中使用下面的代碼:
response.setContentType("text/html;charset=UTF-8");
這也是相當(dāng)于告訴瀏覽器,當(dāng)前使用的UTF-8編碼。
解決方案
聰明的同學(xué)已經(jīng)想到了,我們要告訴瀏覽器,當(dāng)前文件的編碼格式,在頁面中,我們可以使用上面的三種方式來告訴瀏覽器當(dāng)前頁面的編碼,但是在js文件中,使用不了。咋辦?其實(shí)很簡(jiǎn)單,我們可以在web.xml中,使用一個(gè)過濾器,來對(duì)所有的的響應(yīng)設(shè)置編碼格式為UTF-8:
<filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
上面的過濾器,對(duì)所有的請(qǐng)求響應(yīng)設(shè)置的編碼為UTF-8。
清除一下瀏覽器緩存,刷新一下,我們發(fā)現(xiàn)已經(jīng)能夠正確的顯示中文了。
說明一下,前提是所有的文件編碼是UTF-8。
以上所述是小編給大家介紹的解決JS外部文件中文注釋出現(xiàn)亂碼問題,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
純js三維數(shù)組實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了純js三維數(shù)組實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02javascript 文件的同步加載與異步加載實(shí)現(xiàn)原理
本文將介紹javascript 文件的同步加載與異步加載實(shí)現(xiàn)原理,需要了解的朋友可以了解下2012-12-12JS正則匹配URL網(wǎng)址的方法(可匹配www,http開頭的一切網(wǎng)址)
這篇文章主要介紹了JS正則匹配URL網(wǎng)址的方法,可實(shí)現(xiàn)匹配www,http開頭的一切網(wǎng)址的功能,涉及JS正則匹配字符串、數(shù)字及特殊字符構(gòu)建URL的操作技巧,需要的朋友可以參考下2017-01-01webpack5搭建一個(gè)簡(jiǎn)易的react腳手架項(xiàng)目實(shí)踐
本文文章主要介紹了webpack5搭建一個(gè)簡(jiǎn)易的react腳手架項(xiàng)目實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05JavaScript Array實(shí)例方法flat的實(shí)現(xiàn)
flat() 方法用于將一個(gè)嵌套多層的數(shù)組進(jìn)行扁平,返回新數(shù)組,它不會(huì)改變?cè)紨?shù)組, flat 方法在處理多維數(shù)組時(shí)非常有用,它可以讓數(shù)組操作變得更加靈活和簡(jiǎn)潔,本文給大家介紹了JavaScript Array實(shí)例方法flat的實(shí)現(xiàn),需要的朋友可以參考下2024-03-03