如何使用jquery从textarea获取锚标记

Question

我有一个文本区域，其中包含textarea中的链接列表及其内部内容，例如

<p>For example <a href="http://example1.com"> section 1</a></p>
<p class="str-txt">See <b><a href="http://www.example2.com">stryker.com</a>.</b> Follow Investors > Financial information for financial statements.</p>

以上信息在文本区域内给出。我想在点击提交后想要检索所有锚标记。例如我希望输出像

example1.com
example2.com

Answer 1

Demo

我修改了你的代码（主要是JS）。在下面找到你的答案。还要查看JsFiddle演示。

HTML

<div id="textarea"> <textarea id="message" rows="10" cols="60">    
</textarea> </div> 

<div id="button"> <input id="url" type="button" value="URL Link Extraction"></input> <input type="button" value="Internal Link Extraction"></input> <input type="button" value="Validation"></input> </div> 

<div id="result"> </div> 

JS

$(document).ready(function() { 
        $("input#url").click(function() { 
        var messagea = $("#message").val();
        var messageaHtml = $('<div></div>').html(messagea);
        var linkifiedText = linkify(messageaHtml.text());
        linkifiedText = $('<div></div>').html(linkifiedText);
        var links = linkifiedText.find("a[href]");
        links = links.add(messageaHtml.find("a[href]"));
        links.each(function(){
        var link = $(this).attr('href');
        if(isUrl(link))
           $("#result").append(link+'<br/>'); 
        });
    }); 
});


 function isUrl(s) {
var regexp = /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/[^\s]*)?$/i;
return regexp.test(s);
}

 function linkify(html) {
  return html.replace(/[^\"]http(.*)\.([a-zA-Z]*)/g, ' <a href="http$1.$2">http$1.$2</a>');
}

测试用例：在textarea中输入以下HTML并单击链接提取按钮

<p>http://www.linkedin.com</p>
<div>http://www.twitter.com</div>
<p><a href="http://google.net" />Google</a></p>
<a href="http://www.google.com" />Google</a>
<a href="http://google.net" />Google</a>
<a href="www.google.com" />Google</a>
<a href="http://www.google.org" />Google</a>
<a href="http://www.google.cc" />Google</a>
<a href="http://google.in" />Google</a>
<a href="http://google.edu" />Google</a>