基于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 NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 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单例模式应用详解
2013/06/03 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
actionscript与javascript的区别
2011/05/25 Javascript
js原型链原理看图说明
2012/07/07 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
javascript数组去重小结
2016/03/07 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
Python入门篇之列表和元组
2014/10/17 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
Python smallseg分词用法实例分析
2015/05/28 Python
python 获取网页编码方式实现代码
2017/03/11 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
20行python代码实现人脸识别
2019/05/05 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
五好关工委申报材料
2014/05/31 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书