打印

JavaScript正则表达式的一个简单应用

webflash [楼主]

中级会员

帖子: 76
体力: 182
威望: 18
当前: 广东广州
离线: 595 天

1^# 大中小发表于 2007-8-16 09:31

大家都知道一些论坛的标题有高亮显示功能，在这里我不讨论也不研究论坛普遍的实现方法，下面是我的实现方法：

实现思路：把要高亮显示的标题加上特定标签一起存入数据库，方法有下面几种：
1.直接用<font>标签包含，如“<font color="#FF0000">正则表达式</font>”;
2.加入特殊字符串，如“$red正则表达式”，然后在内容列表页加个脚本对含“$red”的标签进行查找替换，适用于大型网站，存入数据库的字节较小，类似网站模板技术;
3.只带上样式引用标签，在内容列表页加入样式控制表现，此方法方便更新显示效果（本实例采用此方法）。

实现功能：
1.表单提交验证说明（重定义form的onsubmit事件）：
（1）提交空表单提示
（2）正确提交表单提示
2.引用样式风格前判断是否输入内容
3.input取得焦点时隐藏提示面板
4.应用样式时，如果原来没有加入样式的，直接加入本样式引用类和必要的HTML标签;如果已存在必要的HTML标签，只改动class的风格引用类名;在原有引用风格的基础上选择“无”样式，可去除HTML。这些改变不会影响到表单的内容字符串，可以方便修改内容并应用样式。

实现方法：
客户端JavaScript实现，主要用到JavaScript的正则表达式匹配和替换函数。虽然本实例主要讲JavaScript的正则表达式应用，但还是加入了不少额外函数用于提示操作，大家可以不管这些，多留意MyStyle(style)和clearHTML()两个函数就行。

代码很简单，相信大家一看就明白，如有必要，有时间再加上教程吧。

<!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=gb2312" />
<title>JavaScript正则表达式的一个简单应用</title>
<style type="text/css">
body {width:630px; margin:50px auto; font-size:12pt;}
a {text-decoration: none;}
em {font-style: normal;}
em.red {color: #F00;}
em.green {color: #060;}
em.blue {color: #06F;}
em.bold {font-weight: bold;}
#content {
	background-color: #FCFCFC;
	margin-top: 20px;
	padding: 10px;
	border: 1px dashed #CCC;
	display:none;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="" onsubmit="return postForm()">
  <input name="text" type="text" id="text" size="60" onfocus="hideInfo()" />
  <input type="submit" name="Submit" value="提交" />
	<span title="先输内容，再选风格。选择一种风格后可以改变标签内的内容再重新选择不同的风格！">
		<a href="javascript:MyStyle('red');"><font color="#FF0000">红</font></a> 
		<a href="javascript:MyStyle('green');"><font color="#006600">绿</font></a> 
		<a href="javascript:MyStyle('blue');"><font color="#0033FF">蓝</font></a> 
		<a href="javascript:MyStyle('bold');"><strong style="color:#000;">粗</strong></a> 
		<a href="javascript:clearHTML();"><font color="#000000">无</font></a>
	</span>
</form>
<div id="content"></div>
<script type="text/javascript">
function showInfo() {
	document.getElementById("content").style.display="block";
}
function hideInfo() {
	document.getElementById("content").style.display="none";
}
function MyStyle(style) {
	showInfo();
var	inputValue=document.form1.text.value;
	if (inputValue=="") {
	document.getElementById("content").innerHTML="<font color='#BF3EFF'>请输入不带HTML的文本字符串再选择右上角的样式!</font>";
	}else{
var re=inputValue.match(/<em\sclass='(red|green|blue|bold)'>/);
if (re==null) {
	styleStr="<em class='"+style+"'>";
	document.form1.text.value=styleStr+inputValue+"</em>";
	document.getElementById("content").innerHTML="<em>"+style+"样式预览：</em>"+document.form1.text.value;
	}else{
var re2=/(red|green|blue|bold)/g;
var nowStyle=inputValue.replace(re2,style);
	document.form1.text.value=nowStyle;
	document.getElementById("content").innerHTML="<em>"+style+"样式预览：</em>"+document.form1.text.value;
	}
}
}
function clearHTML() {
var	inputValue=document.form1.text.value;
var re=inputValue.match(/<em\sclass='(red|green|blue|bold)'>/);
if (re!=null) {
	var nowStr=inputValue.replace(/<em\sclass='(red|green|blue|bold)'>/,"").replace(/<\/em>/,"");
		document.form1.text.value=nowStr;
		document.getElementById("content").innerHTML=document.form1.text.value;
	}
}
function postForm() {
	showInfo();
if (document.form1.text.value=="") {
		document.getElementById("content").innerHTML="<font color='#BF3EFF'>您提交的是空表单!</font>";
	}else{
		document.getElementById("content").innerHTML="<font color='#BF3EFF'>您的表单已正确提交!</font>";
	}
	return false;
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

忙