基于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动态加载js脚本文件的方法
Apr 03 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
js实现两点之间画线的方法
May 12 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
node.js基础知识汇总
Aug 25 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
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
如何打开php的gd2库
2017/02/09 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
JavaScript中的事件处理
2008/01/16 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
jQuery实现放大镜案例
2020/10/19 jQuery
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
js数组的基本使用总结
2021/01/18 Javascript
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
python实现XML解析的方法解析
2019/11/16 Python
python字符串的拼接方法总结
2019/11/18 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
Django models filter筛选条件详解
2020/03/16 Python
PyQt5实现登录页面
2020/05/30 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
优秀校长事迹材料
2014/12/24 职场文书
团委工作总结2015
2015/04/02 职场文书
担保贷款承诺书
2015/04/30 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书