基于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 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
vue 项目软键盘回车触发搜索事件
Sep 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多线程抓取网页实现代码
2010/07/22 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
python书籍信息爬虫实例
2018/03/19 Python
详解Django的CSRF认证实现
2018/10/09 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
详解Python的三种可变参数
2019/05/08 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
挂牌仪式主持词
2014/03/20 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
学生党员检讨书范文
2014/12/27 职场文书
小学信息技术教学反思
2016/02/16 职场文书
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL