使用jQuery制作自定义的字符串语法解析插件-必优博客

使用jQuery制作自定义的字符串语法解析插件

上期在[正则表达式的简单应用以PHP函数preg_match_all抓取HTML元素为例]一文中介绍使用PHP内置函数解析字符串的方法，不过其处理都是在服务器端，这里介绍使用jQuery制作自定义的字符串语法解析插件，同样是基于正则表达式，用于在客户端实现解析和验证字符串。结合jQuery选择器可创建很多更快更实用的语法解析器工具，本文通过实例谈谈如何制作自定义的基于正则表达式的字符串语法解析器。

如果想了解如何制作jQuery插件，可参考这篇文章[jQuery高级篇简单几招学会如何制作jQuery插件]

这里提供一个简单的插件制作框架，可参考如下方法制作自己的字符串语法解析器插件
步骤一，包含jQuery库文件部分

<script type="text/javascript" src="jquery.js"></script>

步骤二，自定义一个jQuery的插件模板框架

<script type="text/javascript">
(function($) {
//自定义插件名称
$.fn.myPlugin = function() {
this.each(function() {
//书写自定义的字符串语法解析代码
});
//返回结果
return $(this);
}
})(jQuery);
</script>

如上模板，只需要自定义插件名称，书写自定义的字符串语法解析代码，并处理返回的结果就能实现一个基于正则表达式的字符串语法解析器工具，下面通过以去除HTML元素标签（strip HTML tags）为例，谈谈具体的制作和实现方法。

一，自定义插件名称

$('p').stripHtml();

这将是具体调用的方法，对于p标签的元素调用stripHtml()

二，书写正则表达式匹配

var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;

这是一个正则表达式，其中gi表示全局和不区分大小写

三，实现去除HTML元素标签

$(this).html(
$(this).html().replace(regexp,"")
);

这里具体应用上面的正则表达式方法，使用replace方法进行替换，

四，通过上面几个步骤，这样就实现了一个完整的去除HTML元素标签插件，其代码如下

(function($) {
$.fn.stripHtml = function() {
var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
this.each(function() {
$(this).html(
$(this).html().replace(regexp,”")
);
});
return $(this);
}
})(jQuery);

这样就实现了一个自定义的字符串语法解析器插件，下面再来看几个的例子

一，检查字符串中是否存在URL（ftp，http或https开头的字符），并给其增加一个可点击的链接

$.fn.clickUrl = function() {
var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
this.each(function() {
$(this).html(
$(this).html().replace(regexp,'<a href="$1">$1</a>‘)
);
});
return $(this);
}