基于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 面向对象技术基础教程
Mar 03 Javascript
用cssText批量修改样式
Aug 29 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
简单了解前端渐进式框架VUE
Jul 20 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下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python实现rest请求api示例
2014/04/22 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
python实现发送邮件及附件功能
2021/03/02 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
python中线程和进程有何区别
2020/06/17 Python
什么是python的自省
2020/06/21 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
指针和引用有什么区别
2013/01/13 面试题
表演方阵解说词
2014/02/08 职场文书
岗位说明书怎么写
2014/07/30 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书