基于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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
php的大小写敏感问题整理
2011/12/29 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
Python中input和raw_input的一点区别
2014/10/21 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Java及python正则表达式详解
2017/12/27 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
python快排算法详解
2019/03/04 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
Python如何调用外部系统命令
2019/08/07 Python
python tornado使用流生成图片的例子
2019/11/18 Python
python将数组n等分的实例
2019/12/02 Python
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
教师节促销活动方案
2014/02/14 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js