JavaScript正则表达式的一个简单应用 [复制链接]

webflash　楼主

笑你废刀

中级会员 

帖子: 82
体力: 203
威望: 18
居住地: 广东省广州市

发表于 2007-8-16 09:31:44 |显示全部楼层

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

实现思路：把要高亮显示的标题加上特定标签一起存入数据库，方法有下面几种：
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>

function hideInfo() {
	document.getElementById("content").style.display="none";
}

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;
	}
}

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

http://webflash.cnblogs.com

西部数码顶级域名注册商39元抢注！

使用道具举报