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

200 阅读 0 评论 132 点赞

我是靠谱客的博主野性歌曲，最近开发中收集的这篇文章主要介绍基于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="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.uoften.com/jslib/jquery/jquery-1.6.2.min.js"></script> 
</head> 
<body> 
<div id="clickContain"> 
<a href="http://www.uoften.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> 