位置:首页 » 教程 » 基于jquery的点击链接插入链接内容的代码

基于jquery的点击链接插入链接内容的代码

日期:2012-08-02 阅读:0num
Advertisement

点击链接插入链接内容。
亮点:
  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.jb51.net/jslib/jquery/jquery-1.6.2.min.js"></script>
</head>
<body>
<div id="clickContain">
<a href="http://www.jb51.net">脚本之家</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/

相关文章
  • 基于jQuery鼠标点击碧波动画竖直导航代码 基于jQuery鼠标点击碧波动画竖直导航代码

    基于jQuery鼠标点击水波动画竖直导航代码 基于jQuery鼠标点击水波动画竖直导航代码.这是一款基于jQuery+CSS3实现的带动画效果的竖直导航栏特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="nav"> <ul> <li><a>网站首页</a></li> <li><a>关于我们</a></li> <li&g

  • 基于jQuery+CSS3点击动画片弹出表单代码 基于jQuery+CSS3点击动画片弹出表单代码

    基于jQuery+CSS3点击动画弹出表单代码 分享一款基于jQuery+CSS3点击动画弹出表单代码是一款鼠标点击图标按钮动画弹出表单特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="buttonCollection"> <div class="qutton" id="qutton_upload"> <div class="qutton_dialog&quo

  • 基于jQuery+CSS3点击卡通弹出表单代码 基于jQuery+CSS3点击卡通弹出表单代码

    基于jQuery+CSS3点击动画弹出表单代码 分享一款基于jQuery+CSS3点击动画弹出表单代码是一款鼠标点击图标按钮动画弹出表单特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="buttonCollection"> <div class="qutton" id="qutton_upload"> <div class="qutton_dialog&quo

  • 基于jquery的点击链接插入链接内容的代码

    点击链接插入链接内容. 亮点: 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="ht

  • 基于jQuery鼠标点击弹出登陆框成效 基于jQuery鼠标点击弹出登陆框成效

    基于jQuery鼠标点击弹出登陆框效果 基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type="button" class="one" value="点击我查看效果" /> <div class="box"> <div class="box2">

  • 基于jQuery实现左右div自适应高度完全相同实现代码

    基于jQuery实现左右div自适应高度完全相同实现代码, 浏览器分别为IE(Internet Explorer).NS(Netscape).Opera.FF(FireFox). clientHeight 大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关. offsetHeight IE.Opera 认为 offsetHeight = clientHeig

  • 基于jQuery插件的加载图片与页面特效代码 基于jQuery插件的加载图片与页面特效代码

    加载图片与页面的功能可以利用js来做但写起来复杂了,下文小编整理了一个基于jQuery插件的加载图片与页面特效代码了,这段代码不但简单并且非常的实用同时兼容性也非常的好. 我们使用jQuery的ajax在页面中就像使用iframe一样加载其他页面内容,今天我给大家分享一个名叫jQuery oLoader的插件,该插件还集成了oPageLoader,可以轻松实现加载图片和页面的漂亮效果. oLoader使用方法 不管是oLoader还是oPageLoader都是基于jQuery,所以调用前请先加载

  • 基于jQuery Bar Indicato的进度条展示特效代码

    进度条效果通常使用js实现不过现在的jquery插件越做越强大了,我们找到一款基于jQuery Bar Indicato插件可以直接制作成进度条了,下面来看看. Bar Indicator是一款基于jQuery的进度条数据展示插件,它可应用于数据统计展示.投票统计以及任务进度等诸多场景中.它使用简单.选项丰富,几乎可以满足用户所有基于进度条的WEB设计需求,本文将结合实例给大家讲解Bar Indicator的使用. 首先加载jQuery和Bar Indicator相关js文件以及css文件. <

  • 基于jquery的给文章加入关键字链接

    开始技术部门打算在后台添加或者修改文章的时候,把文章里面的关键字替换为<a>标签.但是这样就出现一些问题 如果新添加一个关键字,是不是所有的文章又要重新过滤一边.把新关键字替换掉. 如果修改了关键字的名字或者是修改了关键字的链接地址,那么又要重新过滤所有文件. 综合了一些情况后,感觉使用后台解决的方案行不通.于是我想到了前台脚本解决 思路: 关键字链接的信息任然存放在数据库中,在数据库中有一些字段来保存关键字的信息. 当用户添加,删除,更新关键字的时候,在后台生成一个js文件,格式如下: 代码

  • 基于jquery实现点击左右按钮图片横向滚动 基于jquery实现点击左右按钮图片横向滚动

    点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面: 效果图如下: . 代码如下: <!DOCTYPE html> <html lange="en"> <head> <title>点击左右按钮图片横向滚动</title> <meta charset=utf-8" /> <style type="text/css"> * { margin:0

  • 基于jQuery实现点击同时更改两个iframe的网址

    个人推荐用jQuery实现,代码简洁,扩展性强. jQuery部分: 代码如下: function gotourl(url_a, url_b) { $('#ifr_a').get(0).src = url_a; $('#ifr_b').get(0).src = url_b; } html调用: <a href="javascript:void(0)" onClick="gotourl('http://g.cn/','http://baidu.com');"&g

  • 基于jquery鼠标点击其它地方隐藏层的实例代码

    下面的代码运行后,需要再刷新一下. <!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> <meta http-eq

  • 基于jQuery实现左右div自适应高度完全相同的代码

    在线演示:http://demo.jb51.net/js/2012/jquery_demo/jquery_div_autoheihet.htm 完整代码: . 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

  • 基于Jquery的$.cookie()实现跨越页面tabs导航实现代码

    ---------tabs.js----------------- 代码如下: $(function(){ //init seleted tab var on= $.cookie('current_tab'); if(on!="" && !isNaN(on)) { $(".nav li").eq(on).addClass("on").siblings().removeClass(); } //default tab else {

  • 基于Jquery的开发个代阴影的对话框效果代码

    代码如下: <script type="text/javascript" src="http://img.zzl.com/script/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function() { $("#open").click(function() { openDialog(a1)

  • 基于jquery实现的可编辑下拉框实现代码 基于jquery实现的可编辑下拉框实现代码

    原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果 先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致无法显示这种字体,但可以通过一些其他方法实现,大家可以自己尝试下.下面是html代码 <span style="display:inline-block;positio

  • 基于jquery的DIV随滚动条滚动而滚动的代码

    核心代码: . 代码如下: <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function() { $(window).scroll(function() { var top = $(win

  • jquery判断点击事件是否指定区域

    本文章给各位同学介绍一个jquery判断点击事件是否指定区域实例测试,各位朋友可参考,很多时候需要在鼠标点击非目标区域div将目标div隐藏的效果,这是需要判断点击事件是否在目标区域内, jquery的实现方法是:(最近更新,未测) 代码如下 复制代码 $(document).click(function(e){ e = window.event || e; // 兼容IE7 obj = $(e.srcElement || e.target); if ($(obj).is("#elem,#ele

  • 基于jquery ui的autocomplete(乱码处理,上拉列表内容) 基于jquery ui的autocomplete(乱码处理,上拉列表内容)

    基于jquery ui的autocomplete(乱码处理,下拉列表内容) 最终效果图: 所需jar包列表:commons-beanutils-1.8.3.jar,commons-collections-3.2.1.jar,commons-lang-2.5.jar,commons-logging-1.1.1.jar,ezmorph-1.0.6.jar,json-lib-2.1.jar jquery.ui.autocomplete.js 关键的地方已经写了注释 /* * jQuery UI Aut

  • 应用Jquery模拟点击链接

    使用Jquery模拟点击链接 错误的写法: $('#audit').click(); 正确的写法: $('#audit').get(0).click(); 注意:jquery对象和DOM对象的区别. 1.Jquery对象-->Dom对象 var jueryObj=$('jqueryObj'); var domObj=jueryObj.get(0); 或 var domObj=jqueryObje[0]; 2.Dom对象-->Jquery对象 var domObj=document.getEle

最新文章
  • 什么型号的外接键盘与 sony 笔记本键盘手感相仿?

    非常喜欢骚尼笔记本巧克力键盘的手感,键程短,相对较硬.有没有什么型号的外接键盘与sony的手感相仿? 谢谢~ --cut-- kmvan在2014-07-27 18:11:2回答到: 键盘的话,我还是喜欢x架构的 akfish在2014-07-27 18:12:5回答到: @kmvan 巧克力只是键帽吧,支架还是x. codegear在2014-07-27 18:37:0回答到: @kmvan 里面是短键程的剪刀手,不知道市面上有没有外接的类似物... kmvan在2014-07-27 19:0

  • 帝都清河附近,有没有 3 居室要出租的,

    帝都清河附近,有没有3居室要出租的,求推荐 --cut-- crystaldust在2016-05-09 11:49:15回答到: 我后面也要去清河一家公司面试呢,也准备租那边的,你在东升? messnoTrace在2016-05-09 11:49:15回答到: @crystaldust 不是啊,就在清河,,打算租个大套间,,跟朋友们一起的,

  • iPod touch4 32g 加 飞利浦音响底座

    后面有刻字,上面写 面朝大海 春暖花开 繁体 http://2.taobao.com/item.htm?spm=2007.1000622.0.0.cXcnCB&id=39984448956 --cut--

  • digitalOcean 打不开了?

    换了手机流量.移动宽带.公司都是 能能录,到了vps管理页面就是没样式..怎么回事 --cut-- princeofwales在2016-05-09 11:11:49回答到: css所用的cdn被reset了 jiangxinyu226在2016-05-09 11:11:49回答到: @princeofwales 怎么破 timothyye在2016-05-09 11:11:49回答到: @jiangxinyu226 fan墙

  • 海贼王新剧情分析 文斯莫克家与山治揭秘 海贼王新剧情分析 文斯莫克家与山治揭秘

    海贼王新剧情分析,文斯莫克家与山治揭秘.海贼王新剧情吸引了很多<海贼王>的粉丝推测,尤其是一些剧情上的疑问点在网友的推测下开始显而易见,今天我们就来看看网友们对于海贼王新剧情的一些分析内容吧. 网友论证原文: 一.从文斯莫克家所处的政治立场分析 我们从山治最新的通缉令可以看出,文斯莫克家族绝不是一个简单的灰色杀手家族,而是和天龙人及其世界政府有着密切关系的黑白通吃的强力势力.就像七武海一样,其实就是一个世界政府的编制外的机构,说白了,就是帮世界政府和天龙人干一些他们自己不方便干的一些肮脏勾当.

  • 2021年5G用户将达1.5亿 中国首批体验 2021年5G用户将达1.5亿 中国首批体验

    日前,根据爱立信最新发布移动市场报告>数据显示:预测到2021年全球5G移动用户数将达到1.5亿. 2021年5G用户将达1.5亿 中国首批体验 报告预测,韩国.日本.中国和美国将会出现全球首批5G用户. 5G将连接新的终端设备,实现新的物联网用例,而这一转变将为ICT变革在新行业和垂直市场开辟新机遇. 与此同时,日本未2020年奥运会筹备5G网络,测试显示5G网络利用28GHz的高频信号,在一辆以60公里时速行驶的车辆中成功实现了2.5Gbps以上的数据下行速率,这足以秒杀了光纤.并且他们将会

  • 学生良好学习习惯的培养

    学生的学习习惯在长期的学习过程中逐步形成的一种本能.不同的学习习惯对于思维能力与数学能力的提高起着不同的作用.良好的学习习惯不仅可以提高学习效率,而且有利于自学能力的培养.因此,培养小学生良好的学习习惯,是小学阶段教学的一项重要任务.那么,在小学数学教学中,应该培养学生哪些良的学习习惯呢? 1.预习与复习的习惯. 当前,有的教师没有注意培养学生的预习习惯,新课上完后,学生才知道学习了什么,这样无准备的教学,是不可能取得最佳效果的.预习好比火力侦察,能使学生明确本节课的学习目标,了解重.难点在哪里

  • 火影忍者精英副本和冒险副本体力投入规划解析 火影忍者精英副本和冒险副本体力投入规划解析

    在火影忍者的这一款游戏当中的精英副本和冒险副本都是可供玩家使用体力来进行过关斩将的副本,因为体力有限,所以该如何才能够更好的运用自己的体力,是偏向于获得忍者碎片的精英副本,还是偏向于获得各种材料的普通副本呢?今天小编在这里就来给各位玩家们来详细的分析一下. 给各位火影忍者的玩家们来详细的解析分享一下精英副本和冒险副本体力的投入规划. 解析分享: 精英副本需要消费10点体力,而冒险副本则是5点体力,其中,精英副本可以获得一定的忍者碎片或者随机升阶道具,而普通副本则可以获得一定的升级装备资源. 首先

  • QQ空间个性发光字互踩留言代码 QQ空间个性发光字互踩留言代码

    QQ空间发光字代码: [M] ☆[ffg,#FEEEDC,#000000]叶子清清[/ft]☆ ☆[ffg,#FDC68C,#000000]真是冷清[/ft]☆ ☆[ffg,#FBAF00,#000000]如今系苦[/ft]☆ ☆[ffg,#F7941D,#000000]难得痛苦[/ft]☆ ☆[ffg,#FFF100,#000000]如无知己[/ft]☆ ☆[ffg,#FFF467,#000000]真难生存[/ft]☆ ☆[ffg,#FFF799,#000000]前懒后苦[/ft]☆ ☆[ff

  • java栈跟队列的实现

    java栈和队列的实现 java栈实际上就像一个盒子模型.先放进去的要向拿出了必须先把后放进去的拿出来.先进后出. 实现比较简单.直接贴代码,没有什么好说的. //底层实现是一个数组 private long[] arr; private int top; /** * 默认的构造方法 */ public MyStack() { arr = new long[10]; top = -1; } /** * 带参数构造方法,参数为数组初始化大小 */ public MyStack(int maxsiz

热门推荐
  • 朋友之间互踩的qq留言代码 朋友之间互踩的qq留言代码 [M][fts=6][ftc=00AEEF][ftf=Wingdings]8[/ft][/ft][/ft] [ftc=#ED008C][fts=6][ftf=Wingdings]v[/ft][/ft][/ft][ftc=#EE1000]紧急通知:[/ft] [ftc=#ED008C]你好久没来我的空间了[/ft][ftc=#ED008C][fts=6][ftf=Wingdings]v[/ft][/ft][/ft] [ftc=#ED008C][fts=6][ftf=Wingdings]v[/ft]
  • 如何缓解怀孕初期不适症状 如何缓解怀孕初期不适症状 相信孕妈们已经很了解怀孕初期的相关症状了,可是这些症状有时候也会让孕妈们十分苦恼.孕妈们无论遇到什么事情,都不要坏了自己的心情,保持愉悦的情绪对于宝宝的健康成长至关重要.那么,对于如何缓解怀孕初期不适症状这个问题,妈妈网小编为你支几招吧! 缓解怀孕初期不适的方法: 1.恶心呕吐:为了缓解妊娠呕吐带来的不适,孕妇可以选择一些新鲜易于消化的的食物进食,可以多吃一些水果蔬菜,避免进食过于油腻和刺激性的食物.怀孕早期发生的恶心呕吐是一种正常的生理现象,不必过分紧张,通常对健康没多大影响,不需要治疗.只要
  • 怎样的微商营销技巧才是最受用的? 怎样的微商营销技巧才是最受用的? 许多人都议论着微商的未来,尤其是真正从事微商的人,都希望能找到一条生存的道路.虽然一切都在变,但始终还有那么一样东西是不变的,营销也是一样的. 那么,这些不变的东西又是什么呢? 营销的核心就是卖货,卖货的关键点就是供不应求.卖货是好理解的,大家需求的,我提供,然后付款成交,就是这样. 那供不应求怎么说呢? 为什么前两年微商能有那么快的爆发速度,关键的一点就是移动互联网的兴起,让人与人之间更方便了联系,信息之间的交流更加的容易.而人的一个本性就是贪婪,对钱都非常的喜爱.于是以招代理模式为主的微商,
  • 宽带连接错误怎么办 宽带连接错误怎么办 [实用!宽带连接错误怎么办?]宽带连接错误的时候,往往会弹出691.623.678.645.720.721.718.734.769.619.676.815等等数字的窗口,这些都是什么意思,你知道吗?出现这些状况你该怎么办?这个非常实用哦,又涨姿势了吧! 宽带连接错误691(由于域上的用户名或密码无效而拒绝访问)的处理流程: 步骤一:检查用户名密码填写是否错误,如果用户账户密码填写无误 则进入下一步继续处理.建议重建拨号软件.如果重装拨号软件后正常,原因为"拨号软件丢失";如果重装拨号软
  • 2015年电视剧排行榜前十名 2015年电视剧排行榜前十名 2015年电视剧排行榜前十名 1.何以笙箫默 上映时间:2015年1月14日 电视剧<何以笙箫默>改编自顾漫原著同名人气小说,由上海剧酷文化传播有限公司出品,刘俊杰执导,顾漫.墨宝非宝编剧,钟汉良.唐嫣领衔主演.主要讲述何以琛和赵默笙一段年少时的爱恋,牵出一生的纠缠.该剧于2014年6月20日在上海开机,2014年9月14日于香港维多利亚港杀青. 本站阅读配图 2.芈月传 上映时间:2015年 历史宫廷剧<芈月传>是根据蒋胜男同名小说改编而来,讲述了秦宣太后芈月波澜壮阔.纵情恣意,
  • 乐视音乐配件助力Shake Run音摇跑点亮山城 乐视音乐配件助力Shake Run音摇跑点亮山城 有辣妹,有帅哥,有音乐,有热舞,有时尚炫目的荧光装备,有酣畅淋漓的趣味路跑.10月7日晚,上汽名爵Shake Run音摇跑在重庆园博园为跑友们打造了这样一场完美的摇滚路跑之夜,让数千位跑友感受到了音摇跑的独特魅力.乐视的数款耳机和音箱配件也亮相其中,跑友们纷纷试戴了乐视反带式耳机,体验了新款蓝牙音箱,这些装备也为跑友平添了不少乐趣. 当晚3000跑友身着匹克为赛事特别定制的Shake Run专属T恤陆续出发.在五公里的夜跑途中,乐视体育和赛事赞助商玛呀玛咔共同设置了三个音乐加油站,邀请摇滚乐队献