实例:用 JavaScript 来操作字符串(一些字符串函数)


Posted in Javascript onFebruary 15, 2007

操作字符串的值是一般的开发人员必须面临的家常便饭。操作字符串的具体方式有很多,比如说从一个字符串是提取出一部分内容来,或者确定一个字符串是否包含一个特定的字符。下面的 JavaScript 函数为开发人员提供了他们所需要的所有功能:

• concat() ? 将两个或多个字符的文本组合起来,返回一个新的字符串。

• indexOf() ? 返回字符串中一个子串第一处出现的索引。如果没有匹配项,返回 -1 。

• charAT() ? 返回指定位置的字符。

• lastIndexOf() ? 返回字符串中一个子串最后一处出现的索引,如果没有匹配项,返回 -1 。

• match() ? 检查一个字符串是否匹配一个正则表达式。

• substring() ? 返回字符串的一个子串。传入参数是起始位置和结束位置。

• replace() ? 用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。

• search() ? 执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引值。否则返回 -1 。

• slice() ? 提取字符串的一部分,并返回一个新字符串。

• split() ? 通过将字符串划分成子串,将一个字符串做成一个字符串数组。

• length() ? 返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。

• toLowerCase() ? 将整个字符串转成小写字母。

• toUpperCase() ? 将整个字符串转成大写字母。

注意: concat 、 match 、 replace 和 search 函数是在 JavaScript 1.2 中加入的。所有其它函数在 JavaScript 1.0 就已经提供了。

下面让我们看一下如何在 JavaScript 使用这些函数。下面的代码是用到了前面提到的所有函数:

 function manipulateString(passedString1, passedString2) { 
var concatString;
// The string passed to concat is added to the end of the first string 
concatString = passedString1.concat(passedString2); 
alert(concatString);
// The following if statement will be true since first word is Tony 
if (concatString.charAt(3) == "y") { 
alert("Character found!"); }
// The last position of the letter n is 10 
alert("The last index of n is: " + concatString.lastIndexOf("n"));
// A regular expression is used to locate and replace the substring 
var newString = concatString.replace(/Tony/gi,"General");
// The following yields Please salute General Patton 
alert("Please salute " + newString);
// The match function returns an array containing all matches found 
matchArray = concatString.match(/Tony/gi); 
for (var i=0; i  
alert("Match found: " + matchArray[i]); 

// Determine if the regular expression is found, a ?1 indicates no 
 if (newString.search(/Tony/) == -1) { 
alert("String not found"); 
} else { 
alert("String found."); 

// Extract a portion of the string and store it in a new variable 
var sliceString = newString.slice(newString.indexOf("l")+2,newString.length); 
alert(sliceString); 
// The split function creates a new array containing each value separated by a space 
stringArray = concatString.split(" "); 
for (var i=0; i  
alert(stringArray[i]; 

alert(newString.toUpperCase()); 
alert(newString.toLowerCase()); 

下面是执行上面的代码得到的结果:

Tony Patton

Character Found!

The last index of n is: 10

Match found: Tony

Please salute General Patton

String not found

Patton

Tony

Patton

GENERAL PATTON

general patton

示例代码把所有这些提到的函数都用到了。

特殊字符

除了这些函数之外,还有很多的特殊字符可以用来表示关键的效果。这些特殊字符包括:

• \t ? 跳格键

• \b ? 退格 / 删除

• \r ? 回车

• \n ? 换行

• \f ? 换页

特殊字符最常见的用途就是格式化输出。例如,你可能需要在输出中插入一个换行来正确地显示一个值。而且,在换行时也需要回车。在一些平台上,“ \n ”已经足够产生换行效果了,而在一些机器上要正确地显示一个换行则需要“ \r\n ”。下面的例子显示了在一个多行窗口上显示的特殊字符:

var output = null; 

output = "Special Characters"; 

output += "\n"; 

output += "==============="; 

output += "\n"; 

output += "\\t - tab"; 

output += "\n"; 

output += "\\b - backspace/delete"; 

output += "\n"; 

output += "\\r - carriage return"; 

output += "\n"; 

output += "\\n - newline"; 

output += "\n"; 

output += "\\f - form feed"; 

output += "\n"; 

alert(output); 

前面的例子使用加号来连接字符串,而没有使用 concat 函数。原因很简单,对于 concat 函数来说,每一个操作都需要一个新的变量;反之,我们这里用的这种方法则简单地扩展了原有的值,而不需要新的变量。而且,示例中使用换码符来正确地显示特殊字符。系统将一个反斜线当作一个信号,认为它后面会跟一个特殊字符,但是连着两个反斜线则抵消这种操作。输出中的每个字符都通过 newline 特殊字符被显示在新的一行。 

添加到工具箱中 

特殊字符和函数可以与其它 JavaScript 技巧结合起来解决很多问题。其中一种情况是用来进行 JavaScript 客户端表单验证,这篇文章中提出的方法可以简单地用来实现表单验证。 

下面的代码将在一个表单被提交时调用。要提交的表单包含三个域:名称、地址和邮政编码。为了实现起来比较简单,我们只验证每个域都不能为空,并且邮政编码必须是数字。下面的 JavaScript 代码完成这一功能: 

1 function validation() { 


3 var doc = document.forms[0]; 


5 var msg = ""; 


7 if (doc.Name.value == "") { 


9 msg += "- Name is missing\n"; 

10 

11 } 

12 

13 if (doc.Address.value == "") { 

14 

15 msg += "- Address is missing\n"; 

16 

17 } 

18 

19 if (doc.ZipCode.value == "") { 

20 

21 msg += "- Zip code is missing\n"; 

22 

23 } 

24 

25 var zip = new String(doc.ZipCode.value); 

26 

27 if (zip.search(/^[0-9][0-9][0-9][0-9][0-9]$/)==-1) { 

28 

29 msg += "- Enter valid Zip code"; 

30 

31 } 

32 

33 if (msg == "") { 

34 

35 doc.submit; 

36 

37 } else { 

38 

39 msg = "Please correct the following validation errors and re-submit:\n\n" + msg; 

40 

41 alert(msg); 

42 

43 } 

44 

45 } 

46 

47

在用户提交表单时,这个函数就会被调用。对函数的调用是在一个 HTML 按钮的 onSubmit 事件中实现的。

<input type="button" type="submit" value="submit" onClick="validation()">

验证函数检查每个域是否为空。如果发现了一个空值,那么就会在验证消息变量 msg 后面添加一个出错消息。此外,还使用了一个正则表达式来验证邮政编码域的格式。在这里,我们只接受五位数的美国地区邮政编码。如果发现有任何错误(即 msg 变量不为空),那么程序就会显示一个错误消息;否则的话,程序就会提交表单。

一门强大的语言

JavaScript 已经发展成熟为一种功能完备的语言,能够用来构建强大的应用程序。它是对具有非连接性天性的 Web 界面的一个完美的补充,能够在不与 Web 服务器交互的情况下完成很多客户端操作。

Javascript 相关文章推荐
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
webpack3之loader全解析
Oct 26 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
从Ajax到JQuery Ajax学习
Feb 14 #Javascript
JAVASCRIPT对象及属性
Feb 13 #Javascript
js判断浏览器的比较全的代码
Feb 13 #Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 #Javascript
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 #Javascript
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 #Javascript
控制打印时页眉角的代码
Feb 08 #Javascript
You might like
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
学习js所必须要知道的一些
2007/03/07 Javascript
ext监听事件方法[初级篇]
2008/04/27 Javascript
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python操作mysql数据库
2017/03/05 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python2与python3共存问题的解决方法
2018/09/18 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
10个顶级Python实用库推荐
2021/03/04 Python
四议两公开实施方案
2014/03/28 职场文书
司机工作自我鉴定
2014/09/19 职场文书
学校重阳节活动总结
2015/03/24 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
PL350与SW11的比较
2021/04/22 无线电
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏