replace方法的语法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正则表达式对象(RegExp)也可以是字符串(string)，replaceText是替代查找到的字符串。。为了帮助大家更好的理解，下面举个简单例子说明一下
 

<script language="javascript">
var stringObj="终古人民共和国，终古人民";

//替换错别字“终古”为“中国”
//并返回替换后的新字符
//原字符串stringObj的值没有改变
var newstr=stringObj.replace("终古","中国"); 
alert(newstr);
</script>

    比我聪明的你，看完上面的例子之后，会发现第二个错别字“终古”并没有被替换成“中国”，我们可以执行二次replace方法把第二个错别字“终古”也替换掉，程序经过改进之后如下：
 

<script language="javascript">
var stringObj="终古人民共和国，终古人民";

//替换错别字“终古”为“中国”
//并返回替换后的新字符
//原字符串stringObj的值没有改变
var newstr=stringObj.replace("终古","中国"); 

newstr=newstr.replace("终古","中国"); 
alert(newstr);
</script>

    我们可以仔细的想一下，如果有N的N次方个错别字，是不是也要执行N的N次方replace方法来替换掉错别字呢？？呵，不用怕，有了正则表达式之后不用一个错别字要执行一次replace方法。。程序经过改进之后的代码如下
 

<script language="javascript">
var reg=new RegExp("终古","g"); //创建正则RegExp对象
var stringObj="终古人民共和国，终古人民";
var newstr=stringObj.replace(reg,"中国"); 
alert(newstr);
</script>

上面讲的是replace方法最简单的应用，不知道大家有没有看懂？？下面开始讲稍微复杂一点的应用。。


    大家在一些网站上搜索文章的时候，会发现这么一个现象，就是搜索的关键字会高亮改变颜色显示出来？？这是怎么实现的呢？？其实我们可以用正则表达式来实现，具体怎么样实现呢？简单的原理请看下面的代码

<script language="javascript">
var str="中华人民共和国，中华人民共和国";
var newstr=str.replace(/(人)/g,"<font color=red>$1</font>");
document.write(newstr);
</script>

上面的程序缺少互动性，我们再改进一下程序，实现可以自主输入要查找的字符

<script language="javascript">
var s=prompt("请输入在查找的字符","人");
var reg=new RegExp("("+s+")","g");
var str="中华人民共和国，中华人民共和国";
var newstr=str.replace(reg,"<font color=red>$1</font>");
document.write(newstr);
</script>

　　可能大家都会对$1这个特殊字符表示什么意思不是很理解，其实$1表示的就是左边表达式中括号内的字符，即第一个子匹配，同理可得$2表示第二个子匹配。。什么是子匹配呢？？通俗点讲，就是左边每一个括号是第一个字匹配，第二个括号是第二个子匹配。。


　　 当我们要把查找到的字符进行运算的时候，怎么样实现呢？？在实现之前，我们先讲一下怎么样获取某一个函数的参数。。在函数Function的内部，有一个arguments集合，这个集合存储了当前函数的所有参数，通过arguments可以获取到函数的所有参数，为了大家理解，请看下面的代码

<script language="javascript">
function test(){
  alert("参数个数："+arguments.length);
  alert("每一个参数的值："+arguments[0]);
  alert("第二个参数的值"+arguments[1]);
  //可以用for循环读取所有的参数
}

test("aa","bb","cc"); 
</script>

看懂上面的程序之后，我们再来看下面一个有趣的程序

<script language="javascript">
var reg=new RegExp("\\d","g");
var str="abd1afa4sdf";
str.replace(reg,function(){alert(arguments.length);});
</script>

     我们惊奇的发现，匿名函数竟然被执行了二次，并且在函数里还带有三个参数，为什么会执行二次呢？？这个很容易想到，因为我们写的正则表达式是匹配单个数字的，而被检测的字符串刚好也有二个数字，故匿名函数被执行了二次。。在匿名函数内部的那三个参数到底是什么内容呢？？为了弄清这个问题，我们看下面的代码。

<script language="javascript">
function test(){
 for(var i=0;i<arguments.length;i++){
   alert("第"+(i+1)+"个参数的值："+arguments[i]);
 }
}
var reg=new RegExp("\\d","g");
var str="abd1afa4sdf";
str.replace(reg,test);
</script>

     经过观察我们发现，第一个参数表示匹配到的字符，第二个参数表示匹配时的字符最小索引位置(RegExp.index)，第三个参数表示被匹配的字符串(RegExp.input)。其实这些参数的个数，还会随着子匹配的变多而变多的。弄清这些问题之后，我们可以用另外的一种写法

<script language="javascript">
function test($1){
  return "<font color='red'>"+$1+"</font>"
}
var s=prompt("请输入在查找的字符","人");
var reg=new RegExp("("+s+")","g");
var str="中华人民共和国，中华人民共和国";
var newstr=str.replace(reg,test);
document.write(newstr);
</script>

看了上面的程序，原来可以对匹配到的字符为所欲为。下面简单举一个应用的例子

Javascript中的常见问题

1. 集合类对象问题
现有代码中许多集合类对象取用时使用 ()，IE 能接受，Firefox 不能。
解决方法：改用 [] 作为下标运算。如：document.forms("formName") 改为
 

document.forms["formName"];
//又如：
document.getElementsByName("inputName")(1);
//改为
document.getElementsByName("inputName")[1];

2. DIV对象
在 IE 中，DIV对象可以使用ID作为对象变量名直接使用。在 Firefox 中不能。
DivId.style.display = "none";
解决方法：document.getElementById("DivId").style.display = "none";
ps:得对象的方法不管是不是DIV对象，都应该使用getElementById方法。


3. 关于frame
现有问题：在 IE中 可以用window.testFrame取得该frame，mf中不行
解决方法：在frame的使用方面Firefox和IE的最主要的区别是：
如果在frame标签中书写了以下属性：
那么IE可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
IE： window.top.frameId或者window.top.frameName来访问这个window对象
Firefox：只能这样window.top.frameName来访问这个window对象
另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容


4. 窗口
现有问题：IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口，但是Firefox不支持。
解决办法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要传递参数，可以使用frame或者iframe。


5. 在JS中定义各种对象变量名时，尽量使用id，避免使用name.
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 Firefox 中不能，所以在平常使用时请尽量使用id，避免只使用name，而不使用id。


6. document.all
Firefox可以兼容document.all， 但会生成一条警告。可以用getElementById("*") 或者 getElementByTagName("*)来代替
不过对于document.all.length等属性，则完全不兼容。大家尽量不要使用document.all属性.


7. parentElement
IE中支持使用parentElement和parentNode获取父节点.
而Firefox只可以使用parentNode.


8. event
W3C不支持windows.event
比方说,在IE里面:
 

function onMenuClick(){
	collapseMenu(event.srcElement);
}

工作正常。不过在Firefox中，则改成：
 

function onMenuClick(evt){
	if(evt == null)
	evt = window.event; // For IE
	var srcElement = evt.srcElement? evt.srcElement : evt.target;
	// IE使用srcElement, 而Firefox使用target
	collapseMenu(srcElement);

9. event.x 与 event.y 问题
在IE 中，event 对象有 x, y 属性，Firefox中没有。
解决方法:
在Firefox中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），
不过大多数时候是等效的。
如果要完全一样，可以稍麻烦些：
 

mX = event.x ? event.x : event.pageX;

然后用 mX 代替 event.x


10. 用idName字符串取得对象的问题
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在Firefox中不能。
解决办法:用 getElementById(idName) 代替 eval(idName).


14. nodeName 和 tagName 问题
在Firefox中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。
在IE中nodeName 的使用有时会有问题。
解决方法：
使用 tagName，但应检测其是否为空。


15. input的type属性
IE下 input.type属性为只读，但是Firefox下可以修改.


16. 自定义属性
在mf中，自己定义的属性必须getAttribute()取得
而IE可以直接通过"."运算符获取.


17.const 问题
在 IE 中不能使用 const 关键字。如
const constVar = 32;
在IE中这是语法错误.
解决方法:
不使用 const ，以 var 代替.


18. body 对象
Firefox的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在.


19. img对象alt和title的解析
alt：当照片不存在或者load错误时的提示,
title：照片的tip说明,
在IE中如果没有定义title，alt也可以作为img的tip使用，但是在Firefox中，两者完全按照标准中的定义使用
在定义img对象时，最好将alt和title对象都写全，保证在各种浏览器中都能正常使用


20.childNodes获取的节点
childNodes的下标的含义在IE和Firefox中不同，Firefox使用DOM规范，childNodes中会插入空白文本节点。
获取子节点时,一般可以通过node.getElementsByTagName()来回避这个问题。


21.removeNode()
Firefox中节点没有removeNode方法，必须使用如下方法
 

node.parentNode.removeChild(node);

22.innerText
IE支持，FIREFOX不支持
FF中设置内容文本是用textConent属性.

23. XMLHTTP的区别
FireFox中的创建方法为:
 

xmlhttp=new XMLHttpRequest()

而在IE中为:
 

xmlhttp=new ActiveXObject(”Microsoft.XMLHTTP”)

24. img的src刷新问题
在IE 下可以用 可以刷新图片，但在FireFox下不行。主要是缓存问题，在地址后面加个随机数就解决了:
 

myImg.src=this.src+’?'+Math.random();

25. setAttribute()设置属性问题
IE中很多属性都不能用setAttribute进行设置,但Firefox中却可以,如:

theDiv.setAttribute('style','color:red');
//改为:
object.style.cssText = 'color:red;';


setAttribute('class','styleClass')
//改为:
setAttribute('className','styleClass');


obj.setAttribute('onclick','funcitonname();');
//改为:
obj.onclick=function(){fucntionname();};

26. 在firefox中不兼容window.location.href('')的解决办法
location.href('http://www.baidu.com');
以上写法在IE里支持，Firefox里不支持，但如果改成
window.location.href ＝ 'http://www.baidu.com';
则在两种浏览器中都支持了。
另：<button></button>这样写的html元素，在firefox里面不认，改成
<input type='button' value='Test'  id='test' /> 就可以了

-----------------------------------------------------------------------------------------

IE和FIREFOX在解析CSS方面的区别

1. 对高度的解析
IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度
Firefox：没有定义高度时，如果内容中包括了图片内容，Firefox的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。
结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！


3.布局问题
当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。
其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。
非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。
后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。
这只是一些简单的区别,在做布局和CSS设计时候可以综合考虑,但最为有效与简单的解决兼容问题还是用TABLE表格,表格在兼容性方面有着不错的表现.


4.鼠标样式
firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer

5. padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,
必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

6. 消除ul、ol等列表的缩进
消除ul、ol等列表的缩进样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效

7. CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。

8. CSS圆角
IE：不支持圆角。
FF： -moz-border-radius:4px，或者
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius- bottomright:4px;。

9. CSS双线凹凸边框
IE：border:2px outset;。
FF：
-moz-border-top-colors: #d4d0c8 white;
-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;
-moz-border-bottom-colors:#404040 #808080;

10. 滤镜
IE中支持使用滤镜,而Firefox中不支持.

11. 禁止选取网页内容：
在IE中一般用js：obj.onselectstart=function(){return false;};
而firefox用CSS:-moz-user-select:none;
 

<script type="text/javascript"> 
var flashvars = {}; 
var params = {}; 
var attributes = {}; 
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes); 
</script>

给参数赋值：

<script type="text/javascript"> 
var flashvars = { 
  name1: "hello", 
  name2: "world", 
  name3: "foobar" 
}; 
var params = { 
  menu: "false", 

　allowscriptaccess:"always"
}; 
var attributes = { 
  id: "myDynamicContent", 
  name: "myDynamicContent" 
}; 
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes); 
</script>

你也可以写成这样：

<script type="text/javascript"> 
 
var flashvars = {}; 
flashvars.name1 = "hello"; 
flashvars.name2 = "world"; 
flashvars.name3 = "foobar"; 
 
var params = {}; 
params.menu = "false"; 
 
var attributes = {}; 
attributes.id = "myDynamicContent"; 
attributes.name = "myDynamicContent"; 
 
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes); 
 
</script>

也可以直接写入embedSWF函数中

<script type="text/javascript"> 
 
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"}); 
 
</script>

不赋值可以留空

<script type="text/javascript"> 
var flashvars = false; 
var params = {}; 
var attributes = { 
  id: "myDynamicContent", 
  name: "myDynamicContent" 
}; 
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes); 
</script>

给flash传值的另外一种方法：

<script type="text/javascript"> 
 
var flashvars = false; 
var params = { 
  menu: "false", 
  flashvars: "name1=hello&name2=world&name3=foobar" 
}; 
var attributes = { 
  id: "myDynamicContent", 
  name: "myDynamicContent" 
}; 
 
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes); 
 
</script>

1.判断select选项中 是否存在Value="paraValue"的Item
2.向select选项中 加入一个Item
3.从select选项中 删除一个Item
4.修改select选项中 value="paraValue"的text为"paraText"
5.设置select中text="paraText"的第一个Item为选中
6.设置select中value="paraValue"的Item为选中
7.得到select的当前选中项的value
8.得到select的当前选中项的text
9.得到select的当前选中项的Index
10.清空select的项
-------------------------------------------
//1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect,objItemValue)
{
     var isExit = false;
     for(var i=0;i<objSelect.options.length;i++)
     {
         if(objSelect.options[i].value == objItemValue)
         {
             isExit = true;
             break;
         }
     }      
     return isExit;
}

//2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect,objItemText,objItemValue)
{
     //判断是否存在
     if(jsSelectIsExitItem(objSelect,objItemValue))
     {
         alert("该Item的Value值已经存在");
     }
     else
     {
         var varItem = new Option(objItemText,objItemValue);
//       objSelect.options[objSelect.options.length] = varItem;
         objSelect.options.add(varItem);
         alert("成功加入");
     }    
}

//3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect,objItemValue)
{
     //判断是否存在
     if(jsSelectIsExitItem(objSelect,objItemValue))
     {
         for(var i=0;i<objSelect.options.length;i++)
         {
             if(objSelect.options[i].value == objItemValue)
             {
                 objSelect.options.remove(i);
                 break;
             }
         }        
         alert("成功删除");            
     }
     else
     {
         alert("该select中 不存在该项");
     }    
}

//4.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)
{
     //判断是否存在
     if(jsSelectIsExitItem(objSelect,objItemValue))
     {
         for(var i=0;i<objSelect.options.length;i++)
         {
             if(objSelect.options[i].value == objItemValue)
             {
                 objSelect.options[i].text = objItemText;
                 break;
             }
         }        
         alert("成功修改");            
     }
     else
     {
         alert("该select中 不存在该项");
     }    
}
        
//5.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect,objItemText)
{    
     //判断是否存在
     var isExit = false;
     for(var i=0;i<objSelect.options.length;i++)
     {
         if(objSelect.options[i].text == objItemText)
         {
             objSelect.options[i].selected = true;
             isExit = true;
             break;
         }
     }      
     //Show出结果
     if(isExit)
     {
         alert("成功选中");            
     }
     else
     {
         alert("该select中 不存在该项");
     }    
}

//6.设置select中value="paraValue"的Item为选中
//document.all.objSelect.value = objItemValue;

//7.得到select的当前选中项的value
//var currSelectValue = document.all.objSelect.value;

//8.得到select的当前选中项的text
//var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

//9.得到select的当前选中项的Index
//var currSelectIndex = document.all.objSelect.selectedIndex;

//10.清空select的项
// document.all.objSelect.options.length = 0;

字體使用是網頁設計中不可或缺的一部分。經常地，我們希望在網頁中使用某一特定字體，但是該字體並非主流操作系統的內置字體，這樣用戶在瀏覽頁面的時候就有可能看不到真實的設計。美工設計師最常做的辦法是把想要的文字做成圖片，這樣做有幾個明顯缺陷：1. 不可能大範圍的使用該字體；2. 圖片內容相對使用文字不易修改；3. 不利於網站SEO（主流搜索引擎不會將圖片alt內容作為判斷網頁內容相關性的有效因素）。網絡上有一些使用sIFR技術、或javascript/flash hack的方法，但實現起來或繁瑣，或有缺陷。下面要講的是如何只通過CSS的@font-face屬性來實現在網頁中嵌入任意字體。

第一步

獲取要使用字體的三種文件格式，確保能在主流瀏覽器中都能正常顯示該字體。

1、TTF或.OTF，適用於Firefox 3.5、Safari、Opera 

2、EOT，適用於Internet Explorer 4.0+ 

3、SVG，適用於Chrome、IPhone 

下面要解決的是如何獲取到某種字體的這三種格式文件。一般地，我們在手頭上（或在設計資源站點已經找到）有該字體的某種格式文件，最常見的是.TTF文件，我們需要通過這種文件格式轉換為其餘兩種文件格式。字體文件格式的轉換可以通過網站FontsQuirrel或onlinefontconverter提供的在線字體轉換服務獲取。這裡推薦第一個站點，它允許我們選擇需要的字符生成字體文件（在服務的最後一個選項），這樣就大大縮減了字體文件的大小，使得本方案更具實用性。

第二步

獲取到三種格式的字體文件後，下一步要在樣式表中聲明該字體，並在需要的地方使用該字體。

字體聲明如下：

 程序代碼

@font-face {

font-family: 'fontNameRegular';

src: url('fontName.eot');

src: local('fontName Regular'), 

              local('fontName'), 

              url('fontName.woff') format('woff'), 

              url('fontName.ttf') format('truetype'), 

              url('fontName.svg#fontName') format('svg');

}  

/*其中fontName替換為你的字體名稱*/

在頁面中需要的地方使用該字體：

 程序代碼

p { font: 13px fontNameRegular, Arial, sans-serif; }

h1{font-family: fontNameRegular}

或者

 程序代碼

<p style="font-family: fontNameRegular">掬水月在手，落花香滿衣</p>

下面是我通過上面兩步做的示例：

HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>在網頁中嵌入任意字體的完整解決方案 - CSS9.NET</title>

<link rel="stylesheet" href="http://www.blueidea.com/articleimg/2009/12/7263/style.css" />

<style type="text/css">

@font-face {

font-family: 'hakuyoxingshu7000Regular';

src: url('http://www.blueidea.com/articleimg/2009/12/7263/7000.eot');

src: local('hakuyoxingshu7000 Regular'), local('hakuyoxingshu7000'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf') format('truetype'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000') format('svg');

}

#poem{

font-size:45px;

     font-family:hakuyoxingshu7000Regular;

     text-align:center;

}

#poem p{height:30px;line-height:30px;}

</style>

</head>

<body>

<div id="testdiv">

<h1>在網頁中嵌入任意字體的完整解決方案 - CSS9.NET</h1>

<h2>訪問原文： <a href="http://css9.net/css-font-face-solution/">http://css9.net/css-font-face-solution/</a>   關注Web前端開發 - <a href="http://css9.net">CSS9.NET</a></h2>

<div id="poem">

<h3>雲為素食</h3>

<p>京城有同窗，相約素食閣。</p><p>聽者猶未盡，言者語已多。</p><p>滿座皆友朋，暢談何民科。</p><p>禪中寄小語，慎言且柔和。</p>

</div>

</body>

</html>

上面文中的字體用的是某博客之前發佈的一款鋼筆行書字體，喜歡的可以去下載。

下載該示例的源代碼：] 網頁嵌入字體示例