基于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 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
文本框的字数限制功能jquery插件
Nov 24 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
layui实现动态和静态分页
Apr 28 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
js实现简单的打印表格
Jan 15 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
基于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产生动态的影像图
2006/10/09 PHP
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
Python 文件操作的详解及实例
2017/09/18 Python
Python内置函数reversed()用法分析
2018/03/20 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
Java中compareTo和compare的区别
2016/04/12 面试题
高三地理教学反思
2014/01/11 职场文书
致800米运动员广播稿
2014/02/16 职场文书
《泉水》教学反思
2014/04/11 职场文书
农村党员对照检查材料
2014/09/24 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
学生病假条范文
2015/08/17 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
python模板入门教程之flask Jinja
2022/04/11 Python
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android