基于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 14 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
vue-swiper的使用教程
Aug 30 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 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启动时候提示PHP startup的解决方法
2013/05/07 PHP
ThinkPHP安装和设置
2015/07/27 PHP
Yii全局函数用法示例
2017/01/22 PHP
jQuery 选择器理解
2010/03/16 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
对python3新增的byte类型详解
2018/12/04 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
活动志愿者自荐信
2014/01/27 职场文书
意向书范文
2014/03/31 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
植树节标语
2014/06/27 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android