最近在寫一個項目中遇到了一個問題,從java後臺輸出一段字符串,需要用到這個字符串,返回到頁面上面.
假定該字符串爲””
在Chrome上得到的結果是<pre style= width.,......>www.csdn.com<pre>
上網查資料解決方案如下
var reg = /<pre.+?>(.+)<\/pre>/g;
var result = data.match(reg);
data = RegExp.$1;在IE上卻似該字符串本身 www.csdn.com可以直接使用
在FireFox上得到
<pre>www.csdn.com</pre>這個問題的最佳解決方案就是爲了以後更加方便
下面是網上找到的資料
Windows操作系統瀏覽器系列：
IE瀏覽器系列：
特徵表現：均以 “mozilla/” 開頭，”msie x.0;” 中的x表示其版本；
判斷方法：粗略判斷可以只檢索 “msie x.0;” 字符串即可，嚴格判斷可檢索 “mozilla/x.0 (compatibal; msie x.0; windows nt”，不過一般沒有這個必要
Windows版Firefox：
特徵表現：以”mozilla/x.0”開頭，包含”windows nt”,”gecko/”和”firefox/” ；
判斷方法：粗略判斷可以只檢索 “firefox/”和”windows nt” 字符串，嚴格判斷可以檢索”mozilla/” ,”windows nt”,”gecko/”和”firefox/” 四個字符串；
Windows版Chrome：
特徵表現： 以”mozilla/x.0”開頭，包含”windows nt”,”chrome/”，同時包含”applewebkit/”,”safari/”；
判斷方法：粗略判斷可以只檢索 “windows nt”和”chrome/”字符串，嚴格判斷可以同時檢索 “mozilla/” ,”windows nt”,”applewebkit/”,”safari/”,”chrome/” 五個字符串；
Windows版Opera：
特徵表現：以”opera/”開頭，含有”windows nt”,”presto/” 字符串；
判斷方法：粗略判斷只檢索 “windows nt”和”opera/”字符串，嚴格判斷同時檢索 “opera/”,”windows nt” 和 “presto/”；
Windows版Safari：
特徵表現：以”mozilla/”開頭，同時含有”windows nt”,”applewebkit/”,”safari/”；
判斷方法：粗略判斷可以檢索含有 “windows nt”,”safari/” 同時不包含 “chrome/”，嚴格判斷需要同時含有”mozilla/”,”windows nt”,”applewebkit/”,”safari/”但是不包含”chrome/”；
小結：Windows操作系統上的瀏覽器userAgent均包含”windows nt”字符串來表徵windows操作系統。
iPhone平臺瀏覽器系列：
iPhone自帶safari：
特徵表現：以”mozilla/”開頭，含有”iphone”字符串，同時含有 “mobile/”,”safari/”字符串；
判斷方法：粗略判斷只檢索 “iphone”和”safari/”字符串，嚴格判斷則要同時包含 “mozilla/”,”iphone”,”mobile/”,”safari/”四個字符串
iPhone版Opera Mobile：
特徵表現： 以”opera/”開頭，含有”iphone”字符串，同時含有 “opera mini/”,”presto/”字符串；
判斷方法：粗略判斷只檢索 “iphone”和”opera/”字符串，嚴格判斷則要同時包含 “opera/”,”iphone”,”opera mini/”,”presto/”四個字符串
小結：iPhone手機上的瀏覽器userAgent均包含”iphone”字符串
Android平臺瀏覽器系列：
Android自帶瀏覽器（有人說其實是就chrome，但google自己未做表示，且還在開發一個Android上運行的Chrome to Phone）：
特徵表現： 以”mozilla/”開頭，含有”android”和”linux” 字符串，同時含有 “applewebkit/”,”mobile safari/”字符串；
判斷方法：因爲還不知道Android上未來會不會有獨立的safari（估計不會了），所以建議直接嚴格判斷，檢索 “mozilla/”,”android”,”linux”,”applewebkit/”,”mobile safari/”五個字符串
Android版Opera Mobile：
特徵表現： 以”opera/”開頭，含有”android”和”linux” 字符串，同時含有 “opera mobi/”,”presto/”字符串；
判斷方法：粗略判斷只檢索 “android”和”opera/”，嚴格判斷則要同時包含”opera/”,”android”,”linux”,”opera mobi/”,”presto/”五個字符串
Android版Firefox：
特徵表現：以”mozilla/”開頭，含有”android”和”linux” 字符串，同時含有 “firefox/”,”gecko/”,”fennec/”字符串；
判斷方法：粗略判斷只檢索 “android”和”firefox/”，嚴格判斷則要同時包含”mozilla/”,”android”,”linux”,”firefox/”,”gecko/”,”fennec/”六個字符串
小結：Android平臺上的瀏覽器userAgent均包含”android”和”linux”字符串
以上對windows、iphone、android三大平臺的主流瀏覽器解析就基本結束了，其他平臺的linux估計至少與android平臺應該類似，而採用了Mac OS的iPad和麥金塔應該與iphone平臺類似，故而暫時先不做解析，也因爲手頭沒有那麼多設備和操作系統來測試，希望日後能夠補上。
現在的網站產品開發要求跟以前又不一樣了，因爲不僅要滿足電腦瀏覽，還需要滿足用戶通過智能手機（這裏僅指iphone、android、windows phone等真正的智能手機，blackberry和palm這樣的小衆半智能系統暫時不考慮，至於symbian這個僞智能系統就一邊玩去吧）通過以上三個具有代表性的平臺，也大致可以推測出根據瀏覽器userAgent判斷用戶設備的解決方案了。
1、如果需要判斷操作系統，方法比較簡單，在userAgent裏面檢索以下字符串：
含有”windows nt”：顯而易見了，windows操作系統，nt後面的版本號可以判斷OS版本；
含有”mac”：蘋果的Mac OS X或者其他Mac OS內核的系統；
含有”iphone”：蘋果iphone手機專有的，一般情況下也應該含有”mac”；
含有”ipad”：蘋果iPad平板電腦（資料表明iPad的瀏覽器userAgent同時含有”mac”,”iphone”,”ipad”）；
含有”linux”：Linux操作系統或者其他以linux作爲內核的操作系統；
含有”android”：谷歌的Android操作系統，有可能是智能手機，也有可能是安卓版的平板電腦哦，一般情況下android平臺上的userAgent也應該包含”linux”；
含有”unix”,”sunos”,”bsd”三者之一：Unix系統，其實對這個系統的用戶體驗問題，目前幾乎可以不用考慮了；
含有”ubuntu”：ubuntu定製版的linux
……
你也看到了，判斷操作系統及其版本其實並不一直有用，但總有能用到的地方，比如開發專門針對iphone、ipad、android等設備屏幕分辨率的頁面
2、判斷瀏覽器的內核，方法也不困難，我自己琢磨出來的，不一定都對啊：
IE（Trident）內核（IE for Mac, IEs4Linux之類的就不用說了，只考慮windows下的）：以”mozilla/”開頭，含有”windows nt”和”msie”字符串；
Firefox（Gecko）內核：以”mozilla/”開頭，含有”firefox/”和”gecko/”字符串的就是啦，其中Android版的還帶有”fennec/”字符串；
Opera（）內核：以”opera/”開頭，含有”presto/”字符串，其中iphone版還帶有”opera mini/”，Android版也帶有”opera mobi/”；
Webkit內核：以”mozilla/”開頭，含有”applewebkit/”和”safari/”字符串，其中帶有”chrome/”的就是Chrome瀏覽器，不帶的就是Safari或其他；
以上就是主要的瀏覽器內核了
瀏覽器內核纔是解決兼容性的關鍵問題所在，然而，這個兼容性問題已經有jQuery和Extjs等框架幫你解決了，因此這個判斷只針對個別頁面的CSS樣式在不同內核渲染效果不同的情況下使用，當然了，同樣的內核在智能手機和電腦等不同設備上渲染結果也不同，這一點也需要注意。
3、判斷瀏覽器useAgent的實際應用舉例：
不同瀏覽器內核對頁面的渲染效果不同，雖然已經有jQuery和Extjs等爲我們做了兼容處理，但是依然會有一些細小的差別需要我們單獨處理，此時需要判斷瀏覽器內核；
用戶並不僅僅是通過電腦訪問網站的，隨着智能手機的日益普及還有平板電腦的大行其道，使用這兩者來上網的比例越來越高，怎麼辦？平板電腦還好，屏幕大分辨率高，智能手機受限於他的屏幕尺寸和分辨率，雖有強勁的處理能力，也可以完美支持現有的網站，但是爲客戶多考慮一點總沒有壞處你說對吧？畢竟通過局部縮放拖拽的方式看網頁很不舒服，這時呢，我們就可以專門爲iphone、android這樣的窄條屏幕提供一個專用版本來佈局了，一來提升瀏覽體驗，二來降低網絡流量，加快訪問速度；
做訪客流量分析，通過判斷客戶瀏覽器類型並記錄其數量，來優化設計自己的網站，以分別提升其客戶體驗
<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
//以下進行測試
if (Sys.ie) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write('Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);
</script>
或:
KindEditor開源編輯器源碼中的檢測瀏覽器的方法:
KE = {};
KE.browser = (function () {
var ua = navigator.userAgent.toLowerCase();
return {
VERSION:ua.match(/(msie|firefox|webkit|opera)[\/:\s](\d+)/) ? RegExp.$2 : "0",
IE:(ua.indexOf("msie") > -1 && ua.indexOf("opera") == -1),
GECKO:(ua.indexOf("gecko") > -1 && ua.indexOf("khtml") == -1),
WEBKIT:(ua.indexOf("applewebkit") > -1),
OPERA:(ua.indexOf("opera") > -1)
};
})();