手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >基于jquery的点击链接插入链接内容的代码
基于jquery的点击链接插入链接内容的代码
摘要:点击链接插入链接内容。亮点:1.正则匹配标记。2.jQuery单击添加,双击删除。3.textarea加入换行。核心代码:复制代码代码如下:...

点击链接插入链接内容。

亮点:

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实现的无刷新表格分页实例

解析Node.js基于模块和包的代码部署方式

分享十五款 jQuery 社交网络分享插件

js实现异步循环实现代码

jQuery实现控制文字内容溢出用省略号(…)表示的方法

精确到分钟的js日历控件,日期选择器代码

js实现点击链接后延迟3秒再跳转的方法

精品推荐
分类导航