基于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 实现简单的table排序及table操作练习
Dec 28 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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入门速成(2)
2006/10/09 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
JS启动应用程序的一个简单例子
2008/05/11 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
让python json encode datetime类型
2010/12/28 Python
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
Python 中的with关键字使用详解
2016/09/11 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
python中栈的原理及实现方法示例
2019/11/27 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
集体婚礼策划方案
2014/02/22 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
校园安全演讲稿
2014/05/09 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
单位作风建设自查报告
2014/10/23 职场文书
Python中itertools库的四个函数介绍
2022/04/06 Python