BOM和javascript中的trim
来源:互联网 发布:什么软件才要微商赚钱 编辑:程序博客网 时间:2024/06/04 19:46
今天遇到一个 IE7 下 JSON.parse 失败的问题。经过排查发现:服务端某个配置文件编码是 UTF-8 + BOM
,输出的字符串最开始包含了 BOM 字符,不是合法的 JSON。
IE7 不支持原生 JSON,我们项目中使用的是 json2.js,但解析不了开头有 BOM 字符的 JSON 不是 json2 的错,其他浏览器正常是因为它们忽略了响应正文开头的 BOM。如果像下面这样写,每个浏览器都会抛异常:
<script>var a = '{"a":1}';try { JSON.parse(a);} catch(e) { alert(e.message);}</script>
把这段代码贴进无敌强大的 CodeMirror,就能轻松发现这个不可见的 BOM 字符:
BOM 引发的问题多得数不胜数,网上相关记载也很多,这里不再啰嗦了。就今天遇到的情况来看,虽然问题出在接口提供方,但考虑到代码健壮性,也可以先 trim 字符串,再 JSON.parse。
String.prototype.trim
是 ES5 增加的方法,对于老旧浏览器,还得使用自己实现的 trim。我们先来看看 QWrap 和 jQuery 关于 trim 的实现:
//jQuery 1.7.2:trimLeft = /^[\s\xA0]+/;trimRight = /[\s\xA0]+$/;return text == null ? "" : text.toString() .replace( trimLeft, "" ) .replace( trimRight, "" );
jQuery 1.7.2 会过滤字符串两端的 \s
和 \xA0
。对于IE 低版本,\s
等价于[ \t\v\f\r\n]
。这些字符的含义如下表:
禁止自动换行空格符
最后的「禁止自动换行空格符」<NBSP>
,实际上就是 HTML 中经常用到的
。HTML 中,连续空白字符(半角空格、换行、tab 等)会被合并为一个空格,
则不会与其它相邻的空白字符合并。
可以看到,至少在 IE 低版本下,jQuery 1.7.2 无法过滤字符串两端的 BOM 字符。
//jQuery 1.8.1rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,return text == null ? "" : text.toString().replace( rtrim, "" );
jQuery 1.8.1 在之前的基础上,又增加了 \uFEFF
。它是 ES5 新增的空白符,叫「字节次序标记字符(Byte Order Mark)」,也就是前面提到的BOM
。
Unicode3.2 之前,\uFEFF
表示「零宽不换行空格(Zero Width No-Break Space)」;Unicode3.2 新增了\u2060
用来表示零宽不换行空格,\uFEFF
就只用来表示字节次序标记了。
可以看到,jQuery 1.8.1 可以过滤 BOM。另外,考虑到某些浏览器实现的 trim 不过滤 <NBSP>
或 <BOM>
,jQuery 加了一层检测,并不是存在原生 trim 就一定用原生的。
//QWrap 1.1.6return s.replace(/^[\s\uFEFF\xa0\u3000]+|[\uFEFF\xa0\u3000\s]+$/g, "");
QWrap 的 trim,还增加了 \u3000
。它是「表意文字空格(IDEOGRAPHIC SPACE)」,用于 CJK 统一表意文字,可以简单地认为它就是平时我们经常遇到的中文全角空格。
再来看看浏览器的 trim 应该处理哪些字符,ES5 文档中这样描述:
Let T be a String value that is a copy of S with both leading and trailing white space removed. The definitionof white space is the union of WhiteSpace and LineTerminator.
也就是说字符串两端的 WhiteSpace
和 LineTerminator
都要去掉。
ES5 文档规定的 WhiteSpace
,除了包含上面提过的 <SP>、<TAB>、<VT>、<FF>、<NBSP>
和<BOM>
之外,还包含 <USP>
定义的其它空白字符,USP 表示 Unicode 中「Separator, Space」分类下的字符,具体内容如下(来源:1、2):
用于数学方程式U+2060Word Joiner,同 U+200B,但该处不换行。
Unicode3.2 新增,代替 U+FEFFU+3000IDEOGRAPHIC SPACE,表意文字空格。即全角空格U+FEFFByte Order Mark,<BOM>,字节次序标记字符。
不换行功能于 Unicode3.2 起废止
再来看看文档对 LineTerminator
的定义,除了前面介绍过的 <LF>
(Line Feed,换行符)和<CR>
(Carriage Return,回车符),还有两个:
可以看到,ES5 定义的 trim 方法十分强大。浏览器实现方面,我测试了 Chrome 和 Firefox,上述大部分不可见字符都能被过滤,也能被正则里的\s
匹配到。
QWrap 或 jQuery 实现的 trim,则只处理了常见字符,通常也够用。如果需要与 ES5 更加一致的 trim,可以看看 es5-shim 这个项目:
var ws = "\x09\x0A\x0B\x0C\x0D\x20\xA0\u1680\u180E\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF";if (!String.prototype.trim || ws.trim()) { // http://blog.stevenlevithan.com/archives/faster-trim-javascript // http://perfectionkills.com/whitespace-deviations/ ws = "[" + ws + "]"; var trimBeginRegexp = new RegExp("^" + ws + ws + "*"), trimEndRegexp = new RegExp(ws + ws + "*$"); String.prototype.trim = function trim() { if (this === void 0 || this === null) { throw new TypeError("can't convert "+this+" to object"); } return String(this) .replace(trimBeginRegexp, "") .replace(trimEndRegexp, ""); };}转载:https://www.imququ.com/post/bom-and-javascript-trim.html
- BOM 和 JavaScript 中的 trim
- BOM和javascript中的trim
- JavaScript中的Bom和Dom
- javascript中的BOM和DOM
- JavaScript中的DOM和BOM
- JavaScript中的BOM对象和DOM对象
- javascript 中的trim实现
- javascript中的trim实现
- JavaScript中的Trim函数
- JavaScript中的trim 方法
- JavaScript中的BOM对象
- JavaScript BOM中的setInterval
- JavaScript中的BOM对象
- JavaScript中的BOM
- javascript中的BOM
- JavaScript中的BOM
- JavaScript中的BOM和DOM和常用对象
- javascript中的trim()函数实现
- J路会(Java StudyRoad)成立了,诚邀你的加入
- android分辨率/像素/密度/屏幕尺寸/DPI值的方法
- 顶部可以折叠的菜单工具栏
- Jedis连接池的使用
- 性能相关的
- BOM和javascript中的trim
- springmvc4 整合 tiles3
- 互联网金融时代,金融安全谁负责?
- java中,char[ ] subStr=new char[8]是什么意思?跟用String创建的字符串有啥区别?
- MySQL中读取datetime类型的问题
- Java基础-关于session的详细解释
- 解决绝对路径中包含".."的问题
- spring bean 的创建过程
- quartz中的corn表达式(转)