Tips:点此可运行HTML源码

jQuery单击双击实现链接的提取、插入与删除

canrun

点击链接插入链接内容。

亮点：

　　1.正则匹配<a>标签。

　　2.jQuery单击添加，双击删除。

　　3.textarea加入换行。

View Code 
<html>
<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="https://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
</head>
<body>
    <div id="clickContain">
        <a href="http://www.cnblogs.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>
    </div>
    <div id="textContain">
    <textarea rows="10" cols="50" def-v="单击添加，双击删除">单击添加，双击删除</textarea>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            var textareaContain = $("#textContain textarea").eq(0);
            //单击插入链接
            $("#clickContain a").click(function(){
                var pattern = eval('/'+textareaContain.attr('def-v')+'/i');
                textareaContain.val(textareaContain.val().replace('单击添加，双击删除',''));
                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,''));
                if(textareaContain.val() == '')textareaContain.val(textareaContain.attr('def-v'));
                return false;
            });
        });
    </script>
</body>
</html>

效果图一（默认状态）：

效果图二（添加链接）：

效果图三（删除百度链接）：

当全部链接被删除时，自动回复效果图一中的提示。

posted @ 2012-07-19 00:18  Zjmainstay  阅读(953)  评论(0)  编辑  收藏  举报