基于jquery的点击链接插入链接内容的代码
更新时间：2012年07月31日 23:04:48 作者：
基于jquery的点击链接插入链接内容的代码，感觉有bug，解决的朋友可以留言方便更多的朋友
点击链接插入链接内容。
亮点：
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="https://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/
亮点：
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="https://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 获取 outerHtml 包含当前节点本身的代码
jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码，后来实验发现有一个jQuery的一个方法可以解决2014-10-10
这篇文章主要介绍了Jquery使用each函数实现遍历及数组处理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
使用jQuery.form.js/springmvc框架实现文件上传功能
这篇文章主要介绍了使用jQuery.form.js/springmvc框架实现文件上传功能，非常具有参考借鉴价值，感兴趣的朋友一起学习吧2016-05-05
qTip2是一个灰常强大且精致的jQuery提示信息插件，是qTip的第2版，也是一个全新的版本，提供了丰富的功能及漂亮的外观，非常易于使用2012-02-02
这篇文章主要为大家详细介绍了jquery实现动态添加附件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了通过Ajax使用FormData对象无刷新上传文件方法，具有一定的参考价值，感兴趣的朋友可以了解一下。2016-12-12
这篇文章主要为大家分享了适应手机端的jQuery图片滑块动画,不仅在PC浏览器上可以使用，而且更适合在手机端的网页中使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
jQuery凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，经常有人询问一些技巧，因此干脆写这么一篇文章给各位jQuery爱好者，算是抛砖引玉吧。2014-11-11
使用jquery获取url以及jquery获取url参数的实现方法
下面小编就为大家带来一篇使用jquery获取url以及jquery获取url参数的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
本文给大家分享的是jQuery中的end()的定义和使用方法及示例，非常简单实用，有需要的小伙伴可以参考下。2015-07-07
最新评论