先进的网站建设,asp.net做的网站模板下载,新手如何建站,哪个通讯公司网络好详解javascript replace高级用法 在前端与后台交互的时候我们通常都需要将后台传递的数据绑定到html中#xff0c;这个绑定数据的方式我们通常是使用jQuery或者使用原生的innerHTML进行绑定#xff0c;当然也可以使用artTemplate模板来绑定数据#xff0c;那么artTemplate模… 详解javascript replace高级用法 在前端与后台交互的时候我们通常都需要将后台传递的数据绑定到html中这个绑定数据的方式我们通常是使用jQuery或者使用原生的innerHTML进行绑定当然也可以使用artTemplate模板来绑定数据那么artTemplate模板它绑定数据的原理是什么呢其实它就是利用了replace()方法。 对于正则replace约定了一个特殊标记符”$” 1)、$i(i取值范围1~99)表示从左到右正则子表达式所匹配的文本 2)、$表示与正则表达式匹配的全部文本 3)、$(1旁边的那个键)表示匹配字符串的左边文本 4)、$(单引号)表示匹配字符串的右边文本 5)、$$表示$转移 1、replace基本用法 /*要求将字符串中所有的a全部用A代替*/ var str javascript is great script language!; //只会将第一个匹配到的a替换成A console.log(str.replace(a,A)); //只会将第一个匹配到的a替换成A。因为没有在全局范围内查找 console.log(str.replace(/a/,A)); //所有a都被替换成了A console.log(str.replace(/a/g,A)); 1.1、replace基本用法之替换移除指定class类 /*要求将下面这个元素中的unabled类移除掉*/ 提交 var classname document.getElementById(“j_confirm_btn”).className; /*(^|\\s)表示匹配字符串开头或字符串前面的空格(\\s|$)表示匹配字符串结尾或字符串后面的空格*/ var newClassName classname.replace(/(^|\\s)unabled(\\s|$)/,””); document.getElementById(“j_confirm_btn”).className newClassName; 2、replace高级用法之 ---- $i 2.1、简单的$i用法 /*要求将字符串中的双引号用-代替*/ var str a, b; console.log(str.replace(/[^]*/g,-$1-)); //输出结果为-$1-, -$1- /*解释$1就是前面正则(/[^]*/g)所匹配到的每一个字符。*/ 2.2、$i与分组结合使用 /*要求将下面字符串替换成javascript is fn.it is a good script language*/ var str javascript is a good script language; console.log(str.replace(/(javascript)\s*(is)/g,$1 $2 fn.it $2)); /*解释每一对括号都代表一个分组从左往右分别代表第一个分组第二个分组...如上*(javascript)为第一个分组 (is)为第二个分组。$1就代表第一个分组匹配的内容$2就代表第二个分组匹配的内容依此类推...*/ 2.3、$i与分组结合使用----关键字高亮显示 当我们使用谷歌搜索的时候我们会发现我们搜索的关键字都被高亮显示了那么这种效果用JavaScript能否显示呢答案是可以的使用replace()很轻松就搞定了。 /*要求将下列字符串中的java用红色字体显示*/ var str Netscape在最初将其脚本语言命名为LiveScript后来Netscape在与Sun合作之后将其改名为JavaScript。 JavaScript最初受Java启发而开始设计的目的之一就是“看上去像Java”因此语法上有类似之处一些名称和命名规范也借自Java。 但JavaScript的主要设计原则源自Self和Scheme。; document.write(str.replace(/(java)/gi,$1)); /*解释必须要开启全局搜索和忽略大小写否则匹配不到所有的”java”字符*/ 2.4、反向分组----分组的反向引用 在正则中当我们需要匹配两个或多个连续的相同的字符的时候就需要用到反向引用了查找连续重复的字符是反向引用最简单却也是最有用的应用之一。上面的”$i”也是反向分组的一种形式这里再介绍另一种反向分组。 /* /ab(cd)\1e/ 这里的 \1 表示把第1个分组的内容重复一遍*/ console.log(/ab(cd)\1e/.test(abcde));//false console.log(/ab(cd)\1e/.test(abcdcde));//true /*要求将下列字符串中相领重复的部分删除掉*/ var str abbcccdeee; var newStr str.replace(/(\w)\1/g,$1); console.log(newStr); // abcde 3、replace高级用法之参数二为函数 replace函数的第二个参数不仅可以是一个字符还可以是一个函数 3.1、参数二为函数之参数详解 var str bbabc; var newStr str.replace(/(a)(b)/g,function (){ console.log(arguments);//[ab, a, b, 2, bbabc] /*参数依次为 1、整个正则表达式所匹配到的字符串----ab 2、第一个分组匹配到的字符串第二个分组所匹配到的字符串....依次类推一直 到最后一个分组----ab 3、此次匹配在源字符串中的下标返回的是第一个匹配到的字符的下标----2 4、源字符串----bbabc */ }) 3.2、参数二为函数之首字母大写案例 /*要求将下列字符串中的所有首字母大写*/ var str Tomorrow may not be better, but better tomorrow will surely come!; var newStr str.replace(/\b\w\b/gi,function (matchStr){ console.log(matchStr);//匹配到的字符 return matchStr.substr(0,1).toUpperCase() matchStr.substr(1); }); console.log(newStr); 3.3、参数二为函数之绑定数据----artTemplate模板核心 周星驰喜剧电影 var data { name: 功夫, protagonist: 周星驰 }, domStr 名称 {{name}} 导演 {{protagonist}} ; document.getElementById(content).innerHTML formatString(domStr,data); /*绑定数据的核心就是使用正则进行匹配*/ function formatString(str,data){ return str.replace(/{{(\w)}}/g,function (matchingStr,group1){ return data[group1]; }); } 4、replace高级用法之获取与正则表达式匹配的文本 4.1、replace高级用法之获取与正则表达式进行匹配的源字符串 var str i am a good man; var newStr str.replace(/good/g,$); console.log(newStr);//结果输出i am a good man /*解释在这里”$”就是与正则表达式进行匹配的那个源字符串*/ 4.2、replace高级用法之获取正则表达式匹配到的字符 /*要求将i am a good man替换成i am a good-gond man */ var str i am a good man; var newStr str.replace(/good/g,$-$); console.log(newStr); /*解释在这里”$”可以获取到前面正则表达式匹配的内容如上面的”$”就是正则表达式匹配到的”good”*/ 5、replace高级用法之获取正则匹配的左边的字符 /*要求将下列字符串替换成java-java is a good script*/ var str javascript is a good script; var newStr str.replace(/script/,-$); console.log(newStr) /*解释$获取的是正则左边的内容如上正则中script字符前面的是java-$就是-java-$会把script替换掉。*/ 6、replace高级用法之获取正则匹配的右边的字符 /*要求将下列字符替换成java is a good language!it is a good script is a good script*/ var str javascript is a good script; var newStr str.replace(/script/, is a good language!it$); console.log(newStr) /*解释$获取的就是str右边的内容如上正则中$就是 is a good script。 is a good language!it$会把正则匹配到的script替换掉*/ 以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持码农之家。 JavaScript中的replace()方法使用详解 该方法找到一个正则表达式的字符串之间的匹配并取代了匹配的子带的新的子串。 替换字符串可以包含以下特殊替换模式 语法 string.replace(regexp/substr, newSubStr/function[, flags]); 下面是参数的详细信息 regexp : 一个RegExp对象。匹配被替换参数的返回#2. substr : 一个字符串由newSubStr 来替换 newSubStr : 它取代从参数中收到的子字符串 #1. function : 一个函数被调用以创建新的子串 flags : 包含的正则表达式标志的任意组合字符串 g - 全局匹配 i - 忽略大小写m - 匹配多行。此参数仅用于如果所述第一参数是一个字符串。 返回值: 它只是返回一个新的改变的字符串 例子 下面的示例演示了如何使用全球和忽略大小写标志允许替换以使用字符串oranges取代applesJavaScript String replace() Method var re /apples/gi; var str Apples are round, and apples are juicy.; var newstr str.replace(re, oranges); document.write(newstr ); 例子 下面的例子演示了如何在一个字符串转换的词JavaScript String replace() Method var re /(\w)\s(\w)/; var str zara ali; var newstr str.replace(re, $2, $1); document.write(newstr); 以上就是本次给大家分享的关于java的全部知识点内容总结大家还可以在下方相关文章里找到相关文章进一步学习感谢大家的阅读和支持。
