基于jquery的点击链接插入链接内容的代码
基于jquery的点击链接插入链接内容的代码
发布时间:2016-12-30 来源:查字典编辑
摘要:点击链接插入链接内容。亮点: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/

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类