&nbsp|&quot|&amp|&lt|&gt|&ldquo|&rdquo等html转义字符查询以及JavaScript string 的replace

前言

最近学习Weex，写了点东西，有个问题就是json输出有&nbsp|&quot|&amp|&lt|&gt等转义字符，如果你是web直接搞，那么直接用v-html输出即可。但是Weex的网站你看一下

OK，没办法了，只能通过正则来做

下面先贴上我的结果代码，看完代码可以继续往下，查看思路，代码主要用来过滤

export const rexFilter = (originString) => {
    var result = originString.replace(/&([^&;]+);/g, function(matchStr, b) {
        var entity = {
            quot: '"',
            lt: '<',
            gt: '>',
            apos: "'",
            amp: '&',
            ldquo: '“',
            rdquo: '”'
        };
        var r = entity[b];
        return typeof r === 'string' ? r : matchStr;
    });
    return result;
}

例如后台返回的的字符串是

宓珂璟&rdquo我母鸡啊&ldquo我真的&lt母鸡&gt啊

如果你直接

<template recyclable>
    <div class="main-con" @click="onCardClick">
        <text class="detail-text-top">{{title}}</text>
        <text class="detail-text-bottom">{{itemValue.publishTimeString}}</text>
    </div>
</template>

按titile插入输出，他只会原样输出，不会进行转义，而且weex不支持v-html，因此只能通过上面的方法进行正则

    data() {
        return {
            title: rexFilter(this.itemValue.title)
        }
    },

在script标签中用titile绑定即可，对应的值就是过滤后的，输出为

宓珂璟“我母鸡啊”我真的<母鸡>啊

JavaScript string 的replace

点击打开链接

在使用JavaScript对字符串进行处理的时候我们经常会用到replace方法，很简单的一个方法，以前一直不以为意，直到今天看JavaScript语言精粹的时候读到了一个有趣的小例子的时候，并不是十分理解，了解了一下replace的用法才明白，原来replace不像想象中的那么简单。

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

语法：string.replace(subStr/reg,replaceStr/function)

第一个参数可以是字符串的子字符串，也可以是一个正则表达式，第二个参数可以是一个字符串或者一个处理方法，下面我们分别看看

document.write('1234'.replace(1, 'X'));

我们可以得到结果：X234，很正常，但是

document.write('1214'.replace(1, 'X'));

我们预想结果应该是：X2X4，但是得到的结果却是：X214，也就是说如果我们第一个参数写的是子字符串，那么replace只替换第一个匹配就停止搜索

我们换为正则的写法

document.write('1214'.replace(/1/g, 'X'));

这时候我们可以得到预想结果：X2X4

我们看看function的写法

var r = 'abcd'.replace(/\w/g, function() {
            return 'X';
        });
        document.write(r);

这时我们可以看到预想结果：XXXX，所有字符被替换为X，这是我之前对replace的认识，但我在JavaScript语言精粹上看到这样一个例子，我迷惑了

var t = document.getElementById('t');
        String.prototype.deentityfy = function() {
            var entity = {
                quot: '"',
                lt: '<',
                gt: '>'
            };
            return function() {
                return this.replace(/&([^&;]+);/g, function(a, b) {
                   var r = entity[b];
                    return typeof r === 'string' ? r : a;
                }); //end of replace
            };
        } ();

        document.write('<">'.deentityfy());

这段代码是为JavaScript的String对象添加一个deentityfy 方法，用以替换字符串中得HTML字符（把&quot;替换为”,&lt;替换为<，&gt;替换为>），我们先忽略作者使用的语言技巧，看看他的replace是怎么用的，第一个参数是一个正则表达式，是匹配之前提到的三个字符串，第二个参数的function竟然有了两个参数，这两个参数到底是什么？为什么方法却得到了预想结果，我们来简单分析一下。

首先entity[b]是JavaScript关联数组的用法，根据数组数据的name得到value，为了方便理解，我们不妨改造一下这个方法，让它变得简单些，让我们可以更清楚地看到function的参数到底是什么，同时为了消除浏览器转码问题，我们修改一下替换字符串

String.prototype.deentityfy = function() { 
         var entity = { 
             a: 'A', 
             b: 'B', 
             c: 'C' 
         }; 
         return function() { 
             return this.replace(/1([^12])2/g, function(a, b) { 
                 for (var i = 0; i < arguments.length; i++) { 
                     document.write(arguments[i] + '<br/>'); 
                 } 
                 document.write('===========================<br/>'); 
                 var r = entity[b]; 
                 return typeof r === 'string' ? r : a; 
             }); //end of replace 
         }; 
     } ();

     document.write('1a21b21c2'.deentityfy());

1a2 
a 
0 
1a21b21c2 
=========================== 
1b2 
b 
3 
1a21b21c2 
=========================== 
1c2 
c 
6 
1a21b21c2 
=========================== 
ABC

很奇怪对不对，最后的<”>是方法的结果，很正确，得到了预期结果，让我们看看function的参数部分，

function被调用了3次，恰恰是匹配的次数，每次都置换匹配字符串。

每次调用的时候方法有四个参数

第一个参数很简单，是匹配字符串

第二个很诡异，不过每个都看一遍不难得出，第二个参数是正则表达式括号内的匹配的内容（分组内容）

第三个参数和容易想到，是匹配项在字符串中的index

第四个参数则是原字符串

很神奇对不对，但是不是就是这样了呢，我们再写一个试试

var r = '1a21b21c2'.replace(/1\w2/g, function() {
            for (var i = 0; i < arguments.length; i++) {
                document.write(arguments[i] + '<br/>');
            }
            document.write('===========================<br/>')
            return 'X';
        });
        document.write(r);

和前面例子很像，只是简单的把所有匹配项替换为了X，看看结果

1a2
0
1a21b21c2
===========================
1b2
3
1a21b21c2
===========================
1c2
6
1a21b21c2
===========================
XXX

出乎意料对不对，结果是预期的，但是参数少了一个，第二项参数不见了，看看究竟还有什么不同——正则表达式中看似多余的括号不见了，上一个例子中，第二项参数恰恰是括号内的匹配项（熟悉正则表达式的同学清楚，括号使分组用的），是不是第二个参数就是正则表达式中括号内的匹配项呢，我们把括号加回来验证一下

var r = '1a21b21c2'.replace(/1(\w2)/g, function() {
            for (var i = 0; i < arguments.length; i++) {
                document.write(arguments[i] + '<br/>');
            }
            document.write('===========================<br/>')
            return 'X';
        });
        document.write(r);

1a2
a2
0
1a21b21c2
===========================
1b2
b2
3
1a21b21c2
===========================
1c2
c2
6
1a21b21c2
===========================
XXX

果不其然，这样我们就了解了function中到底有哪些参数，现在看看JavaScript语言精粹重的例子就应该明白了，当然我们需要知道关联数组，立即执行函数，闭包和arguments对象，如果让我们把一句话中所有的单词首字母大写，是不是会了呢

//方法很多，这个只是验证我们刚才的理论才故意写成这样麻烦的做法
 var sentence = 'i love you';
        var upper = sentence.replace(/(\w)\w*\b/g, function(a,b) {
            return b.toUpperCase()+a.substring(1);
        });
        document.write(upper);

//这样写其实已经可以胜任
  var sentence = 'i love you';
        var upper = sentence.replace(/\w+\b/g, function(a) {
            return a.substr(0,1).toUpperCase()+a.substring(1);
        });
        document.write(upper);

下面是HTML最全的转义图标，自己查询用的，可以忽略它

转义字符图标

No.	文字表記	10進表記	16進表記	文字		Comment
001	"	"	"	"""		quotation mark = APL quote
002	&	&	&	"&"		ampersand
003	&lt;	&#60;	&#x3C;	"<"		less-than sign
004	&gt;	&#62;	&#x3E;	">"		greater-than sign
005	&nbsp;	&#160;	&#xA0;	" "		no-break space = non-breaking space

char glyph	HTML tag
	 
¡	¡
¢	¢
£	£
¤	¤
¥	¥
¦	¦
§	§
¨	¨
©	©
ª	ª
«	«
¬	¬
	­
®	®
¯	¯
°	°
±	±
²	²
³	³
´	´
µ	µ
¶	¶
·	·
¸	¸
¹	¹
º	º
»	»
¼	¼
½	½
¾	¾
¿	¿
À	À
Á	Á
Â	Â
Ã	Ã
Ä	Ä
Å	Å
Æ	Æ
Ç	Ç
È	È
É	É
Ê	Ê
Ë	Ë
Ì	Ì
Í	Í
Î	Î
Ï	Ï
Ð	Ð
Ñ	Ñ
Ò	Ò
Ó	Ó
Ô	Ô
Õ	Õ
Ö	Ö
×	×
Ø	Ø
Ù	Ù
Ú	Ú
Û	Û
Ü	Ü
Ý	Ý
Þ	Þ
ß	ß
à	à
á	á
â	â
ã	ã
ä	ä
å	å
æ	æ
ç	ç
è	è
é	é
ê	ê
ë	ë
ì	ì
í	í
î	î
ï	ï
ð	ð
ñ	ñ
ò	ò
ó	ó
ô	ô
õ	õ
ö	ö
÷	÷
ø	ø
ù	ù
ú	ú
û	û
ü	ü
ý	ý
þ	þ
ÿ	ÿ

char glyph	HTML tag
ƒ	ƒ

char glyph	HTML tag
"	"
&	&
<	&lt;
>	&gt;

char glyph	HTML tag
←	←
↑	↑
→	→
↓	↓
↔	↔
↵	↵
⇐	⇐
⇑	⇑
⇒	⇒
⇓	⇓
⇔	⇔

char glyph	HTML tag
Œ	Œ
œ	œ
Š	Š
š	š
Ÿ	Ÿ

char glyph	HTML tag
ˆ	ˆ
˜	˜

char glyph	HTML tag
∀	∀
∂	∂
∃	∃
∅	∅
∇	∇
∈	∈
∉	∉
∋	∋
∏	∏
∑	∑
−	−
∗	∗
√	√
∝	∝
∞	∞
∠	∠
∧	∧
∨	∨
∩	∩
∪	∪
∫	∫
∴	∴
∼	∼
≅	≅
≈	≈
≠	≠
≡	≡
≤	≤
≥	≥
⊂	⊂
⊃	⊃
⊄	⊄
⊆	⊆
⊇	⊇
⊕	⊕
⊗	⊗
⊥	⊥
⋅	⋅

char glyph	HTML tag
	 
	 
	 
‌	‌
‍	‍
‎	‎
‏	‏
–	–
—	—
‘	‘
’	’
‚	‚
“	“
”	”
„	„
†	†
‡	‡
‰	‰
‹	‹
›	›
€	€

char glyph	HTML tag
•	•
…	…
′	′
″	″
‾	‾
⁄	⁄

char glyph	HTML tag
⌈	⌈
⌉	⌉
⌊	⌊
⌋	⌋
⟨	⟨
⟩	⟩

char glyph	HTML tag
◊	◊

char glyph	HTML tag
♠	♠
♣	♣
♥	♥
♦	♦

char glyph	HTML tag
℘	℘
ℑ	ℑ
ℜ	ℜ
™	™
ℵ	ℵ

char glyph	HTML tag
Α	Α
Β	Β
Γ	Γ
Δ	Δ
Ε	Ε
Ζ	Ζ
Η	Η
Θ	Θ
Ι	Ι
Κ	Κ
Λ	Λ
Μ	Μ
Ν	Ν
Ξ	Ξ
Ο	Ο
Π	Π
Ρ	Ρ
Σ	Σ
Τ	Τ
Υ	Υ
Φ	Φ
Χ	Χ
Ψ	Ψ
Ω	Ω
α	α
β	β
γ	γ
δ	δ
ε	ε
ζ	ζ
η	η
θ	θ
ι	ι
κ	κ
λ	λ
μ	μ
ν	ν
ξ	ξ
ο	ο
π	π
ρ	ρ
ς	ς
σ	σ
τ	τ
υ	υ
φ	φ
χ	χ
ψ	ψ
ω	ω
ϑ	ϑ
ϒ	ϒ
ϖ	ϖ