Javascript 中 String.replace( ) 的妙用

String.replace( ) 简介

语法:

 
string.replace(regexp, replacement)

regexp :您要执行替换操作的正则表达式,如果传入的是一个字符串,那就会当作普通字符来处理,并且只会执行一次替换操作;如果是正则表达式,并且带有 global (g) 修饰符,则会替换所有出现的目标字符,否则,将只执行一次替换操作。

replacement :您要替换成的字符。

返回值是执行替换操作后的字符串。

String.replace( ) 的简单用法

 
var text = "javascript 非常强大 !";
text.replace(/javascript/i, "JavaScript");
// 返回:JavaScript 非常强大 !

String.replace( ) 替换所有出现的目标字符

 
var text= "javascript 非常强大 !JAVASCRIPT 是我最喜欢的一门语言 !";
text.replace(/javascript/ig, "JavaScript");
// 返回:JavaScript 非常强大 !JavaScript 是我最喜欢的一门语言 !

String.replace( ) 实现调换位置

 
var name= "Doe, John";
name.replace(/(w+)s*,s*(w+)/, "$2 $1");
// 返回:John Doe

String.replace( ) 实现将所有双引号包含的字符替换成中括号包含的字符

 
var text = '"JavaScript" 非常强大!';
text.replace(/"([^"]*)"/g, "[$1]");
// 返回:[JavaScript] 非常强大!

String.replace( ) 将所有字符首字母大写

 
var text = 'a journey of a thousand miles begins with single step.';
text.replace(/bw+b/g, function(word) {
                           return word.substring(0,1).toUpperCase( ) +
                                  word.substring(1);
                         });
 
// 返回:A Journey Of A Thousand Miles Begins With Single Step.

批量替换 MySQL 指定字段中的字符串

批量替换 MySQL 指定字段中的字符串是数据库应用中很常见的需求,但是有很多初学者在遇到这种需求时,通常都是用脚本来实现;其实,MySQL 内置的有批量替换语法,效率也会高很多;想了解具体方法,继续阅读本文吧 :)

批量替换的具体语法是:

 
UPDATE 表名 SET
指定字段 = replace(指定字段, ’要替换的字符串’, ’想要的字符串’) 
WHERE 条件;

如果你想把 article 表中 ID 小于5000的记录,content 字段中“解决”替换成“解放”,那么语法就是:

 
UPDATE article SET
content = replace(content, ’解决’, ’解放’) 
WHERE ID<5000;

是不是很方便 :)

用 CSS 实现图片替换文字(Image replacement)

不论是对浏览者还是对搜索引擎,文字都是最佳的页面内容展示方式,但是,由于字体等原因的限制,纯文字的展示渐渐无法满足爱美的设计师的要求。

于是,出现了通过 CSS 来实现用图片替换文字的方法,这种方式既能实现页面上各种丰富的效果,又能满足搜索引擎优化的需要。因此,深受网页设计师的喜爱,本文介绍了几种常见的图文替换技术。

Fahrner Image Replacement (FIR)

这是最早出现的图文替换技术,是由 Todd Fahrner 提出的,非常容易理解:

HTML 代码:

 
<h2>
	<span>Hello World</span>
</h2>

CSS 代码

 
<style type="text/css">
h2 {
	background:url(hello_world.gif) no-repeat;
	width: 150px;
	height: 35px;
}
span {
	display: none;
}
</style>

代码非常明白:先将图片应用在 H2 的背景中,然后将 SPAN 的标签隐藏。但是这种方式有个问题,就是当图片无法显示时,将导致这个区域没有任何内容。同时,使用 display:none 的方式隐藏的内容,将被许多主流屏幕阅读器忽略,从而造成可用性问题,因此,应该尽量避免使用。

Phark 的方法

这种技术是由 Mike Rundle 提出的,好处是不需要额外的标签:

HTML 代码:

 
<h2>
Hello World
</h2>

CSS 代码

 
<style type="text/css">
h2 {
	text-indent: -5000px;
	background:url(hello_world.gif) no-repeat;
	width: 150px;
	height:35px;
}
</style>

代码也非常简单,通过文本缩进,将文字隐藏,但是,当图片无法显示时,依然存在 FIR 的问题。

Gilder/Levin 的方法

这种技术是由 Tom Gilder 和 Levin Alexander 共同提出的,这也许是一个最完善的图文替换技术了:

HTML 代码:

 
<h2>
	<span></span>Hello World
</h2>

CSS 代码

 
<style type="text/css">
h2 {
	width: 150px;
	height: 35px;
	position: relative;
}
h2 span {
	background: url(hello_world.gif) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}
</style>

首先,将 H2 的 position 设为 relative ,这样将使 H2 里面的元素定位以 H2 为参照,然后将 SPAN 元素绝对定位,撑满整个 H2 区域,同时将背景图应用在 SPAN 标签里面;这种方法的原理是将 SPAN 标签覆盖在文字内容上面,一旦 SPAN 里面的背景图无法显示,将显示下层的文字内容,不影响正常使用。但是,此方法也有一个缺陷,就是背景图不能透明,否则将透出下面的文字。