`
xlcai
  • 浏览: 19864 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js replace的一些东西

阅读更多
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
window.onload = kk;
/*今天有人问到js replace的问题;
也回去研究了下顺便整理总结下;
如果有整理错了的地方会不完善的话,望及时纠正;
码农扣扣群:2177712,交流学习*/
function kk(){
	/*模型stringObj.replace(reg,text)*/
	/*↓简单的replace大家应该都明白,就是直接替换reg字符串↓*/
	var demoStr = "Hello world";
	demoStr = demoStr.replace("world","guys");
	/*↑替换world为guys,控制台输出Hello guys↑*/
	console.log(demoStr);
	
	/*↓还有一种reg是正则↓*/
	demoStr = "我们正在竟赛,他竟然不顾竟赛,竟直朝我们走了过来,中止了竟赛";
	/*↑比如上面一篇文章出现了错别字,竞赛打成了竟赛,径直打成了竟直,还出先了多个↑*/
	/*↓如果直接replace('竟赛','竞赛'),再replace('竟直','径直'),你会发现只替换了第一个被匹配到的字符串↓*/
	console.log(demoStr.replace('竟赛','竞赛').replace('竟直','径直'));
	/*↑上面输出--我们正在竞赛,他竟然不顾竟赛,径直朝我们走了过来,中止了竟赛↑*/
	/*↓js是没有Java那种replaceAll替换所有的,所以就需要正则了↓*/
	console.log(demoStr.replace(/竟赛/g,'竞赛').replace(/竟直/g,'径直'));
	/*↑这里用了正则,加个g是全局标志,替换所有匹配到的字符串↑*/
	/*↓还可以这样写↓*/
	console.log(demoStr.replace(/竟赛|竟直/g,function(str){	
		return str=="竟赛"?"竞赛":"径直";
	}));
	/*↑上面这样写确实麻烦了点,只是告诉大家有这种方法,text也可以是函数,每个匹配到的字符串都调用该函数,return的字符串做为替换text使用↑*/
	/*一个函数的用处,替换所有单词首字母大写*/
	console.log('blue yellow dark'.replace(/\b\w+\b/g,function(str){
		return str.substring(0,1).toUpperCase()+str.substring(1);
	}));
	/*\b是定位符,通常匹配单词的边界*/
	
	/*↓还有一个/i是不区分大小写↓*/
	demoStr = "Hello Ok";
	console.log(demoStr.replace(/o/g,"d"));
	/*↑console -- Helld Ok↑*/
	console.log(demoStr.replace(/o/gi,"d"));
	/*↑console -- Helld dk↑*/
	
	/*↓$n的用法↓*/
	demoStr = "I love you";
	/*↓我爱你,为什么你不爱我呢?如何替换为you love I↓*/
	console.log(demoStr.replace(/(\w+)\s(\w+)\s(\w+)/,"$3 $2 $1 不行吗?"));
	/*↑用()创建子匹配,$1表示从左边第一个括号匹配到的字符串,$2表示第二个。。↑*/
	/*↑console you love I 不行吗?(语法不通啊。。。。)↑*/
	/*↑/(\w+)\s(\w+)\s(\w+)/ \w匹配字母数字下划线;+匹配前面的表达式一次或多次;\s匹配一个空白字符↑*/
	
	/*基本的用法就是这些了,其实复杂的地方就复杂的正则表达式上,还得继续学习啊*/
	/*↓再举几个栗子↓*/
	/*↓把首尾字母相同的单词css标红色demoStr可能是取到的一段html,replace后再html(demoStr)↓*/
	demoStr = "kick cook look boob";
	var reg = /\b(\w)\w*\1\b/g;
	console.log(demoStr.replace(reg,function(str){
		return "<span color='red'>"+str+"</span>"
	}));
	/*↑console <span color='red'>kick</span> cook look <span color='red'>boob</span>↑*/
	/*↑这里\1类似$1捕获第一个括号内的表达式,即第一个单词↑*/
	
	reg = /^(\d{4})(-)(\d{2})\2(\d{2})$/g;
	/*↑匹配YYYY-mm-dd的日期格式;^匹配的是字符串的开头,如果在[]里表示的是非;$匹配的是一行的结尾;同理\2表示第二个括号的-↑*/
	console.log("今天是2015-03-31".match(reg));
	console.log("2015-03-31是今天".match(reg));
	console.log("2015-03-31".match(reg));
	/*这里又说到了match,match是检索字符串是否匹配正则,如果不匹配返回的是null,如果匹配的上返回匹配结果的数组,跟reg有没有标志g相关,有兴趣的可以搜搜看*/
	
	/*去html标签*/
	demoStr = "<body><div>Let's <span color='red'>go!<span></div> </body>";
	console.log(demoStr.replace(/<\/?[^>]*>/g,''));
	/*console Let's go! */
	/*解释<就是html标签都有的<;\/是转意的/即html结束标签里的/比如</body>;因为开始标签比如<body>没/所以?表示匹配0次或1次;
	[^>]中括号内的^表示非,不匹配中括号内的字符,即不匹配>;
	*表示0个或n个;最后再加上>;
	正好匹配所有html的标签*/
	
	/*冰山一角,抛砖引玉。码农扣扣群:2177712*/
}
</script>
</head>
<body>
</body>

 

分享到:
评论

相关推荐

    JS处理json日期格式化问题

    对于从C#返回的日期字段,当进行JSON序列化后,在前台JS里显示的并不是真正的日期,这让我们感觉很不爽,我们不可能为了这东西,把所有日期字段都变成string吧,所以,找了一个JS的扩展方法,来实现这个功能 ...

    Javascript-Simple-Cheat-Sheet:只是我的个人备忘单上的一些很酷的JS东西

    JavaScript,也被称为JS,是一种广泛应用于网页和网络应用的轻量级编程语言。它与HTML和CSS一起,构成了web开发的三大核心技术。本备忘单是个人为了记录和整理JavaScript中的一些实用技巧和常见功能而创建的,旨在...

    Find-And-Replace:Epicodus第6周代码审查

    查找字符串的一部分,然后用其他东西替换,9/11/15 凯尔·普拉图(Kyle Pratuch) 描述 查找和替换允许用户键入短语或句子,确定要替换的部分,然后用其他内容替换。 设置 克隆此存储库:运行命令git clone ...

    javascript正则表达式学习之位置匹配.docx

    var result = "[JS]Lesson_01.mp4".replace(/\b/g, '#'); console.log(result); // 输出 "[#JS#]#Lesson_01#.#mp4#" ``` ##### 3.3 (=p) 和 (!p) - **(=p)**:正向先行断言,表示在位置后面的内容必须符合模式 `p`...

    利用javascript实现一些常用软件的下载导航

    &lt;head&gt; &lt;... charset=gb2312″&gt; &lt;title&gt;javascript 播放器下载导航测试&... ”divcontent” xss=removed&gt;好像没找到你要的东西哦:)&lt;/div&gt; [removed] function $(id){return document.getElementById

    external-links-js:永远不要再输入 target="_blank" !

    外部链接JS 永远不要再输入 target="_blank" !要求JavaScript,没有别的。用法在新窗口中打开所有外部链接在新窗口中打开所有外部链接。 ExternalLinks ( ) ;白名单域定义不应在新窗口中打开的域列表。 External...

    字符串的东西

    而在JavaScript中,`"Hello"` 和 `'Hello'` 同样表示字符串,但JavaScript还支持模板字符串,如``Hello, ${name}``。 2. **字符串的长度** 许多语言提供了获取字符串长度的方法,例如Python的`len()`函数,Java的`...

    javascript模拟C#格式化字符串

    而在JavaScript中,虽然没有内建的format()方法,但是我们可以通过编写一些自定义函数来实现类似的字符串格式化功能。JavaScript中实现C#风格的字符串格式化操作主要涉及以下几个知识点: 1. JavaScript中的字符串...

    js下将金额数字每三位一逗号分隔

    工作中很常用的东西: 例1,使数字1111111变成11,111,111.00,保留两位小数。 &lt;html&gt; &lt;head&gt; [removed] function outputmoney(number) { number = number.replace(/\,/g, ); if(isNaN(number) || ...

    some-random-cat:一个实用程序,可以生成任何随机的东西!

    这是一些随机猫的官方文档。 文件版本(v2.0) 安装 要安装该软件包,您必须确保在您的计算机上安装了node.js。 之后,您可以在要安装软件包的终端中简单地执行npm i some-random-cat或在全局安装npm i some-random...

    一篇关于正则表达式东西

    1. JavaScript:全局匹配使用 `g` 标志,不区分大小写使用 `i` 标志。 2. Python:使用 `re` 模块进行正则操作,支持多种匹配模式。 3. Java:使用 `java.util.regex` 包进行正则处理。 4. PHP:内置 `preg_match`、...

    错误剖析之JavaScript的9个陷阱及评点

    for-in会遍历所有的东西 在使用`for-in`循环遍历数组时,它不仅会遍历数组的索引,还会遍历数组的所有可枚举属性,包括原型链上的属性。例如: ```javascript var arr = [5, 10, 15]; var total = 1; for (var x ...

    正则表达式

    由于某些字符类非常常用,所以JavaScript的正则表达式语法包含一些特殊字符和转义序列来表示这些常用的类.例如, \s 匹配的是空格符,制表符和其它空白符, \s 匹配的则是空白符之外的任何字符. 正则表灰式的字符类 ...

    property-replacer:编写单元测试,您可以安全地替换对象属性并在拆卸时撤消替换。 受 perl 测试的启发

    编写 javascript 单元测试,您可以在其中安全地替换对象属性并在拆卸时撤消替换。 受 perl Test::Resub 和 python redef 的启发 安装 npm install property-replacer 用法 Replacer.replace(object, key, any); --&...

    jQuery-Merge-for-php-diff:Chris Boultons PHP DIFF 的客户端合并工具。 - http

    我在服务器端使用这样的东西。 另请查看。 $ left = explode ( "\n" , preg_replace ( '/\r\n|\r/' , "\n" , $ THECONTENTOFFILE_A )); $ right = explode ( "\n" , preg_replace ( '/\r\n|\r/' , "\n" , $ ...

    vue面试题(纯干货百分百面试问到)

    - 编程式跳转:使用Vue Router提供的`this.$router.push()`或`this.$router.replace()`方法在JavaScript中控制导航。 7. **Vue CLI中使用自定义组件**: - 在`components`目录下创建组件文件,如`indexPage.vue`...

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解及工程源码

    &lt;script type="text/javascript" src="js/ExtCkeditor.js"&gt; &lt;script type="text/javascript"&gt; Ext.onReady(function(){ Ext.QuickTips.init(); // turn on validation errors beside the field globally //Ext...

    campaign-scraper:用于您的 indiegogo 活动的 API

    像这个 jQuery 小例子这样的东西应该能让你朝着正确的方向前进...... &lt;!DOCTYPE html &gt; &lt; html &gt; &lt; head &gt; &lt; script src =" ...

Global site tag (gtag.js) - Google Analytics