位置:首页 » 教程 » 基于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

最新文章
  • Checkio-磨练你的Python技术

    http://www.checkio.org/ 这是一个练习和切磋Python技艺的好地方,向各位Python玩家极力推荐.但各位也要注意劳逸结合,一旦迷上,可能会耗费你大量的休息时间. Checkio还不时地举办一下活动,有奖品拿.我最近就收获了一本Python3 Cookbook,这本书也是非常棒的. --cut-- fityme在2013-06-09 21:16:0回答到: 好像很有意思- exboy在2013-06-09 21:58:3回答到: 闲时玩玩很不错.. xinlinqi在20

  • 2016年元旦慰问信大全

    2016年元旦慰问信大全 篇一: xxx全体员工: 你们好! 值此20XX年来临之际,公司领导班子向奋战在工作一线的全体员工致以新年的问候和衷心的感谢,向员工家属们致以崇高的敬意! 20XX年是公司实现二次创业的关键一年,本年度经历了变更领导班子.重新制定工作重点等一系列事件.如何保持公司经营规模的增长是我们各项工作的重中之重,也是压力所在.为此,我们重新修订了公司发展规划,调整工作重心,努力开创崭新的工作局面.全体干部员工都在围绕着年度目标和任务积极主动地开展各项工作,管理水平有了明显的提升,

  • 吃醋泡黑豆好吗 吃醋泡黑豆好吗

    本站食疗养生配图 醋和黑豆都是营养学家推荐的健康食品.你知道吗?这两者搭配还能起到保护眼睛的功效. 黑豆表皮中含有丰富的花青素,能够清除体内自由基,预防脂肪氧化和维护眼部血管的健康.把大量黑豆泡在醋里,醋便溶入了花青素.而花青素在酸性条件下更稳定,所以用醋泡有利于黑豆中营养物质的吸收. 泡制前需要先将黑豆炒熟,放凉后倒入陈醋使其没过黑豆,但需要留出大约1/3的空间,以免黑豆膨胀溢出.盖好盖后浸泡,等黑豆完全膨胀后就可以吃了.建议每天吃10粒左右黑豆,最好再喝10毫升豆醋. 黑豆中含嘌呤物质,所以

  • 2016猴年春节手抄报 2016猴年春节手抄报

    猴年春节手抄报: 吉祥如意过新年 我把新世纪的祝福和希望,悄悄地放在将融的雪被下,让它们,沿着春天的秧苗生长,送给你满年的丰硕与芬芳! 这一刻,有我最深的思念.让云捎去满心的祝福,点缀你甜蜜的梦,愿你拥有一个幸福快乐的新年! 新年表示年新的一年,新的开始,万事从头起,良好的开端是成功的一半祝你永远是成功者! 新年祝福话语-哥们儿,恭喜发财,大吉大利,祝你全家平安,工作顺利!今年发财了吧,别忘了请客! 给你特别的祝福,愿春节带给你无边的幸福.如意,祝春节快乐,新年充满幸福和成功. 新年祝福话语-过

  • 如何使用企业邮箱轻松组织会议? 如何使用企业邮箱轻松组织会议?

    "咦?老板来了一封邮件?哇,大事情,赶紧组织相关同事开会!" 小李看完老板的邮件,不慌不忙的点击邮件右上角的"发起会议",一分钟不用就发出会议邀请,预定了会议室,并开始准备会议资料. 新来的小马好奇的问:"你不是要组织开会吗?怎么不去叫人啊?" "已经叫啦." "哈?什么时候?" "就刚刚在邮件里啊,这是盈世企业邮箱的独有功能,我们只需用邮箱就可以一键发起会议了." -- 互联网时代,人

  • 省小妹怎么发布话题 省小妹怎么发布话题

    省小妹发布话题方法.省小妹是一款专为80.90后美眉服务的软件,提供目前最萌最便捷的记账功能,同时还能发布省钱心得,为美眉们提供最省心的花钱资讯,那么现在小编就教大家省小妹发布话题方法. 1)点击打开[省小妹],点击下方的[伙伴们];(如下图) 2)点击右上角的[按钮],然后点击下方的编辑框输入话题内容,最后点击右上角的[按钮]即可.(如下图)

  • ubuntu下安装nodejs以及升级的办法

    本文介绍了ubuntu 12.04服务器安装nodejs以及升级的方法,ubuntu安装nodejs以及升级的实例教程,需要的朋友参考下. 因为最近打算研究下nodejs,结果发现了网上并没有适合先在的nodejs的安装和更新教程 首先在ubuntu的命令行下执行: ? 1 apt-get install nodejs 然后我们需要安装npm,这是nodejs用的版本管理工具: ? 1 apt-get install nodejs 接着我们用node -v可以看下版本,如果发现版本很低的话(截止

  • QQ聊天时图片无法显示怎么解决

    打开个人文件夹,该文件夹通常位于用户"文档"文件夹下"Tencent FilesQQ号码",清理"Image"文件夹中的文件,通常就可以解决聊天图片无法显示的问题.但是如果问题仍然存在,那么我们必须对QQ的缓存文件进行清理.在个人文件夹文件过多.过大时,彻底地关闭QQ,重新打开并登录QQ,软件将自动弹出清理个人文件夹的提示.此外,我们也可以在QQ主界面上单击下方的设置按钮,在"基本设置|文件管理"中单击"立即清理&q

  • C++标准转换运算符const_cast

    前面讲了C++继承并扩展C语言的传统类型转换方式,最后留下了一些关于指针和引用上的转换问题,没有做详细地讲述.C++相比于C是一门面向对象的语言,面向对象最大的特点之一就是具有"多态性(Polymorphism)". 要想很好的使用多态性,就免不了要使用指针和引用,也免不了会碰到转换的问题,所以在这一篇,就把导师讲的以及在网上反复查阅了解的知识总结一下. C++提供了四个转换运算符: const_cast <new_type> (expression) static_cas

  • IT零起步-CentOS6.4部署OpenVPN服务器

    OpenVPN是一个用于创建虚拟专用网络加密通道的软件包,实现二/三层的基于隧道的VPN.最早由James Yonan编写.OpenVPN允许创建的VPN使用公开密钥.数字证书.或者用户名/密码来进行身份验证.它大量使用了OpenSSL加密库中的SSLv3/TLSv1协议函数库. 目前OpenVPN能在Solaris.Linux.OpenBSD.FreeBSD.NetBSD.Mac OS X与Windows 2000/XP/Vista/Windows 7以及Android上运行,并包含了许多安全

热门推荐
  • Mina 快速入门 Mina 快速入门 Mina是什么 Mina是一个基于NIO的网络框架,使用它编写程序时,可以专注于业务处理,而不用过于关心IO操作.不论应用程序采用什么协议(TCP.UDP)或者其它的,Mina提供了一套公用的接口,来支持这些协议.目前可以处理的协议有:HTTP, XML, TCP, LDAP, DHCP, NTP, DNS, XMPP, SSH, FTP... .从这一点来说,Mina不仅仅是一个基于NIO的框架,更是一个网络层协议的实现. MINA 设计架构 1.Mina 整体架构 开发程序时,只需要在Min
  • 9项有效提高智力的健身运动 9项有效提高智力的健身运动 现今,体育健身运动不仅仅只是能健身,同时还有增长智力作用,专家发现,很多运动项目都对大脑锻炼具有很好的效果.如果你想促进脑细胞新生.开发的智慧的话,那么就赶紧行动起来吧!下面先跟随小编一起来看看,哪些是有助于智力发展的运动. 1.健走 健走作为一项有效的心肺练习,比较普通的行走,心率至少提高13%,大脑获氧量至少增加5%.因为多了一副健走手杖,直立行走的我们也可以充分利用双手,做到手脚并用四肢协调,促进脑细胞新生. 普通步行也可以!每周3次普通步行,每次30分钟以上.大脑的学习能力.注意力和抽象
  • 和你在一起 和你在一起 我周围的很多朋友都是付出型的.一旦陷入恋爱之中就会全身心投入不知有所保留,这样的好处是爱得浓墨重彩轰轰烈烈淋漓尽致.而缺点也是显而易见的:如果感情出现问题,那么一定是伤到痛彻心扉歇斯底里;就算侥幸没遇到太多挫折,由于浓烈的爱意会随着时间有些许变化,也会让他们有得不到回应或者不被理解的痛苦. 比如刚刚跟我聊到电话都发烫的C君.明明一直算是我的良师益友前辈和一直在学习借鉴的前辈,工作中的成绩也是有目共睹.可偏偏在谈女朋友的问题上一再的遇到挫折,出现各种极品状况. 今天我实在忍不住:"说句作为朋友才会
  • 索尼概念播放器Xperia Ultra 索尼概念播放器Xperia Ultra 4月11日,国外设计师Junior Riega打造了一款概念索尼Xperia播放器,称为索尼Xperia Ultra. 索尼Xperia Ultra配备了5.2英寸Super AMOLED高清显示屏,分辨率为2048 x 1536像素,并有Gorilla玻璃保护,8GB RAM和128GB ROM,并配备了Snapdragon 5.1GHz处理器,64核心(ARM的Cortex A57的Krait 1000),操作系统是Andr​​oid 6.0. 索尼Xperia Ultra配备的摄像头为21
  • 硕腾科技发布全新系列工业级三防加固智能手持、平板终端产品 硕腾科技发布全新系列工业级三防加固智能手持、平板终端产品 近日国内主要的工业级加固手持.平板电脑产品制造商深圳硕腾科技将在首届深圳智能城市展发布2014-2015年度全新系列产品,产品包括了智能手持终端.三防加固平板电脑等. 硕腾科技磐石Hugerock系列三防加固平板电脑中的首款型号是T70,由硕腾科技2013年4月份推出,该产品推出后已经在电力.农业.林业.海洋.勘探.军事.石油.铁路.执法.物流.工业流程控制等各行业领域得到广泛的推广和应用,在国内外受到一致好评.在此基础上硕腾科技对原有产品的硬件技术规格进行了大幅度升级,新系列产品包括了更多的尺
  • 电脑辐射怎么防 电脑辐射怎么防 电脑辐射防护措施:用笔记本电脑代替台式机 没错,你最好用最快速度将家中的台式机淘汰掉,因为研究显示,台式机机箱的辐射要比笔记本电脑大得多.再说,现在已经完全不用担心笔记本电脑速度比台式机慢.显示屏比台式机小等各种问题,各种超高品质的笔记本电脑已经层出不穷,显示屏也已足够大了,实在不行你还可以外接一个显示器.不过,也要提醒你,最好不要一边给笔记本电脑充电一边开机使用,因为通电的变压器是辐射的主要来源,所以最好给笔记本电脑充足电后拔下电源再开机使用. 笔记本电脑图片 电脑辐射防护措施:每天清洁电脑屏