基于jquery的点击链接插入链接内容的代码


Posted in Javascript onJuly 31, 2012

点击链接插入链接内容。
亮点:

1.正则匹配<a>标记。

2.jQuery单击添加,双击删除。

3.textarea加入换行。
核心代码:

<!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> 
<title>Click to Text</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-Language" content="zh-CN" /> 
<script type="text/javascript" src="http://demo.3water.com/jslib/jquery/jquery-1.6.2.min.js"></script> 
</head> 
<body> 
<div id="clickContain"> 
<a href="https://3water.com">三水点靠木</a> 
<a href="http://www.baidu.com">百度</a> 
<a href="http://www.qq.com">QQ</a> 
<a href="http://www.sina.com.cn">新浪</a> 
<a href="http://www.sina.com.cn">abc</a> 
</div> 
<div id="textContain"> 
<textarea rows="10" cols="50"></textarea> 
</div> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var textareaContain = $("#textContain textarea").eq(0); 
//单击插入链接 
$("#clickContain a").click(function(){ 
if(!$(this).hasClass('lock')) { 
var p = eval('/<a(?:.*)'+$(this).html()+'(?:.*)a>/i'); 
var addString = $(this).parent().html().match(p); //正则提取<a>标签 
if(!!addString) addString = addString[0]+'\n'; //正则匹配后的[0]是全部匹配的值,加入换行\n 
textareaContain.val(textareaContain.val()+addString); 
$(this).addClass('lock'); //阻止第二次点击 
} 
return false; 
}); 
//双击删除链接 
$("#clickContain a").dblclick(function(){ 
$(this).attr('class',null); //删除整个class属性,以免出现class="" 
var p = eval('/<a(?:.*)'+$(this).html()+'(?:.*)a>(\\n*)/gi'); 
textareaContain.val(textareaContain.val().replace(p,'')); 
return false; 
}); 
}); 
</script> 
</body> 
</html>

作者:Zjmainstay


出处:http://www.cnblogs.com/Zjmainstay/

Javascript 相关文章推荐
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 #Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 #Javascript
jQuery.each()用法分享
Jul 31 #Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 #Javascript
JavaScript中的私有/静态属性介绍
Jul 26 #Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 #Javascript
了解一点js的Eval函数
Jul 26 #Javascript
You might like
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
python操作CouchDB的方法
2014/10/08 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
python实现人工蜂群算法
2020/09/18 Python
介绍一下Linux中的链接
2016/06/05 面试题
业务部门经理岗位职责
2014/02/23 职场文书
库房管理员岗位职责
2014/03/09 职场文书
广告创意求职信
2014/03/17 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS
MySQL导致索引失效的几种情况
2022/06/25 MySQL