承接上文,这是第6个案例:

附上项目链接: https://github.com/wesbos/JavaScript30

这个主要是要实现在给定的json里匹配出搜索框里的city or state,然后把人口加上千分号,下面是我加了注释的源码:

<script>
const endpoint =
'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; const cities = [];
fetch(endpoint)
.then(blob => blob.json())
// 扩展运算符(…)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
.then(data => cities.push(...data)); function findMatches(wordToMatch, cities) {
return cities.filter(place => {
// here we need to figure out if the city or state matches what was searched
const regex = new RegExp(wordToMatch, 'gi');
return place.city.match(regex) || place.state.match(regex)
});
} function numberWithCommas(x) {
// 给数字加千分符
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
/* /\B(?=(\d{3})+(?!\d))/g 这个正则,我正则不太好,所以一开始不知道是什么意思,网上看了下,现在已经完全理解了
1.元字符\B,其实真正要匹配的是这个,就像语文里面,你是一个和蔼可亲的人,最后要匹配的是人,和蔼可亲是条件,这里其实也是后面一串是条件,我试了下
var a = 123456;
a.toString().replace(/\b/g, 'aa') //"aa123456aa" \b匹配的是单词两边的这些空隙
a.toString().replace(/\B/g, 'aa') //"1aa2aa3aa4aa5aa6" \B和\b是相反的,不属于\b的位置就会被\B匹配到
2.先行断言?=,我们再来看后面这个,他的作用,举个例子吧,x(?=y),跟着先行断言后面这个的前面那个就会被匹配到,如:xyz,这里x会被匹配,y不会被匹配,
匹配的是先行断言前面的.在这个正则里面,先行断言后面跟着(\d{3})+,其实是找寻后面跟了3的倍数个数字的位置,像对于一串字符12345来说,
这个正则表达式匹配1和2,2和3这两位置,因为这两个位置后面都满足跟了3的倍数个数字(234和345),很显然还不满足我们的要求,我们是只要2和3这个位置
3.后行断言?!,我们想要的情况,是三个三个数字,但是后面不会再跟着数字的情况,?!\d这个就是这个意思 总结: (?=(\d{3})+(?!\d))代表的是:后面需要跟3的倍数个数字,且在这(3的倍数个数字)之后不能再有数字了,他可以是小数点.或字符串尾。
如12345.67中只有2和3之间的位置满足我们上述的条件。我们只需要指出这个位置,然后将它替换成逗号。 备注:其实后面那个后行断言也可以直接用\b,只要他后面是字符边界,也可以匹配
*/
} function displayMatches() {
const matchArray = findMatches(this.value, cities);
const html = matchArray.map(place => {
const regex = new RegExp(this.value, 'gi');
// 高亮选中的字符
const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
return `<li>
<span class="name">${cityName}, ${stateName}</span>
<span class="population">${numberWithCommas(place.population)}</span>
</li>`;
}).join('');
suggestions.innerHTML = html;
} const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions'); searchInput.addEventListener('change', displayMatches);
//这个keyup事件貌似没什么用
searchInput.addEventListener('keyup', displayMatches);
</script>

JavaScipt30(第六个案例)(主要知识点:给数字加千分号的正则)的更多相关文章

  1. “全栈2019”Java第十六章:下划线在数字中的意义

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  2. JavaScipt30(第八个案例)(主要知识点:canvas)

    承接上文,这是第8个案例,要实现的效果是按住鼠标不放,进行拖动时可以在画布上画出不同粗细不同颜色的曲线. 附上项目链接: https://github.com/wesbos/JavaScript30 ...

  3. JavaScipt30(第七个案例)(主要知识点:数组some,every,findIndex方法)

    承接上文,这是第7个案例,这个案例没什么说的,主要有三个注意点: 附上项目链接: https://github.com/wesbos/JavaScript30 // 1. slice(begin, e ...

  4. JavaScipt30(第五个案例)(主要知识点:flex布局)

    承接上文,这是第5个案例:这节没什么讲的,随便记录下吧,主要是用了flex布局与transform translateY,js部分和案例1类似. 附上项目链接: https://github.com/ ...

  5. JavaScipt30(第四个案例)(主要知识点:数组原型链上的一些方法)

    承接上文,下面是第四个案例 附上项目链接: https://github.com/wesbos/JavaScript30 const inventors = [ { first: 'Albert', ...

  6. JavaScipt30(第三个案例)(主要知识点:css变量)

    承接上文 https://www.cnblogs.com/wangxi01/p/10641210.html,下面是第三个案例: 附上项目链接: https://github.com/wesbos/Ja ...

  7. [vue案例的知识点]todo-list

    文章的原材料来自于vue的官方示例:https://cn.vuejs.org/v2/examples/todomvc.html,我们在学习过程中,试着对其中的一些知识点进行记录: 一.浏览器数据存储, ...

  8. Java进阶(二十六)公司项目开发知识点回顾

    公司项目开发知识点回顾 前言 "拿来主义"在某些时候并不是最佳选择,尤其是当自己遇到问题的时候,毫无头绪. 在一次实验过程中,需要实现数据库的CRUD操作.由于之前项目开发过程中, ...

  9. React评论展示案例(包含知识点:state、props、ref、React声明周期、localStorage本地存储等)

    本案例在上一篇的案例(React组件之间通过Props传值的技巧(小案例,帮助体会理解props.state.受控组件和非受控组件等))的基础上加强功能和用户体验,但是当然还有很多需要改进的地方,后期 ...

随机推荐

  1. MySQL Study之--MySQL压力測试工具mysqlslap

    MySQL Study之--MySQL压力測试工具mysqlslap 一.Mysqlslap介绍     mysqlslap是MySQL5.1之后自带的benchmark基准測试工具,类似Apache ...

  2. [DevExpress]设置列的时间格式

    方法一 设置DisplayFormatFormatString:gFormatType:DateTime 方法二

  3. H264--1--编码原理以及I帧B帧P帧[4]

    ---------------------- 前言 ----------------------- H264是新一代的编码标准,以高压缩高质量和支持多种网络的流媒体传输著称,在编码方面,我理解的他的理 ...

  4. YTU 2517: 打倒魔王↖(^ω^)↗

    2517: 打倒魔王↖(^ω^)↗ 时间限制: 1 Sec  内存限制: 128 MB 提交: 231  解决: 112 题目描述 从前有一个王子,他喜欢上了邻国的一个公主.终于有一天他向公主表白了, ...

  5. 模块化编程:AMD规范

    目前,通行的Javascript模块规范共有两种:ComonJS和AMD. CommonJS node.js的模块系统,就是参照CommonJS规范实现的.在ConmonJS中,有一个全局方法requ ...

  6. J201700526-hm

    プレーンテキスト  纯文本 きも 肝 リレーショナル 亲属的,相关的,有关的; ギャップ 缺口; 间隔; 分歧;

  7. Rails5入门

    更新: 2017/05/29 更新: 2017/09/07 补充对ruby自身的扩张的放置位置  配置文件位置  /config/routes.rb  最简单的定义方法  get ('hello/in ...

  8. Unity ScriptObject

    http://godstamps.blogspot.com/2012/02/unity-3d-scriptableobject-assetbundle.html http://ivanozanchet ...

  9. [Qt Creator 快速入门] 第5章 应用程序主窗口

    对于日常见到的应用程序而言,许多都是基于主窗口的,主窗口中包含了菜单栏.工具栏.状态栏和中心区域等.这一章会详细介绍主窗口的每一个部分,还会涉及资源管理.富文本处理.拖放操作和文档打印等相关内容.重点 ...

  10. CF17C Balance

    题意 [题目描述] 一个仅由a,b,c三种字符组成的字符串,可以对其进行如下两种操作: 选择两个相邻字符,将第一个字符替换成第二个. 选择两个相邻字符,将第二个字符替换成第一个. 这样,通过任意多次的 ...