基于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 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
JS中操作JSON总结
Dec 06 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
jQuery实现高亮显示的方法
Mar 10 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
vue router返回到指定的路由的场景分析
Nov 10 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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中常用字符串处理代码片段整理
2011/11/07 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
vue 优化CDN加速的方法示例
2018/09/19 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
Python中用于计算对数的log()方法
2015/05/15 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Django视图和URL配置详解
2018/01/31 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
python opencv读mp4视频的实例
2018/12/07 Python
对python调用RPC接口的实例详解
2019/01/03 Python
python实现机器人卡牌
2019/10/06 Python
Python类中self参数用法详解
2020/02/13 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
自动化职业生涯规划书范文
2014/01/03 职场文书
中国文明网签名寄语
2014/01/18 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
天河观后感
2015/06/11 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js