基于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 处理 URL 的两个函数代码
Aug 13 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
vue实现通讯录功能
Jul 14 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
JavaScript实现tab栏切换效果
Mar 16 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
基于Zend的Config机制的应用分析
2013/05/02 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
php实现简单加入购物车功能
2017/03/07 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
学习python的几条建议分享
2013/02/10 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
详解python时间模块中的datetime模块
2016/01/13 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
flask 实现token机制的示例代码
2019/11/07 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
文秘求职信范文
2014/04/10 职场文书
2014年采购部工作总结
2014/11/20 职场文书
2015年班干部工作总结
2015/04/29 职场文书
会议新闻稿
2015/07/17 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python