基于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 相关文章推荐
JQuery中的ready函数冲突的解决方法
May 17 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
php fread函数使用方法总结
2019/05/28 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
JavaScript 乱码问题
2009/08/06 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python下载网络小说实例代码
2018/02/03 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
python保存网页图片到本地的方法
2018/07/24 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
python爬虫请求头设置代码
2020/07/28 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
女大学生自我鉴定
2013/12/09 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
青年文明号汇报材料
2014/12/23 职场文书
教师节倡议书2015
2015/04/27 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
PL350与SW11的比较
2021/04/22 无线电