How to extract all hyperlink titles from big html string using javascript?

Question

I got an HTML string as :var code; I want to extract all hyper link title values in this big string and place them in textarea. I tried the following but it never works. could any one tell me what i am doing wrong?

sample hyperlinks to look for(i want to extract mango,cherry,...) :

 <a href="/season/">mango</a>
 <a href="/season/">cherry</a>

my code string has blocks of data like below:

<div class="details">
    <div class="title">
      <a href="/season/">mango</a>
      <span class="type">3</span>
    </div>

  </div>

full code:

$.getJSON('http://anyorigin.com/get?url=http://asite.com/getit.php/&callback=?', function(data){

    //$('#output').html(data.contents);

 var siteContents = data.contents;    

//writes to textarea 
 document.myform.outputtext.value = siteContents ;


var start = siteContents.indexOf('<ul class="list">');
var end = siteContents.indexOf('<ul class="pag">', start);
var code = siteContents.substring(start, end);
 document.myform2.outputtext2.value = code ;

 var pattern = /<a href="([^"]+?)">([^<]+?)<\/a>/gi;
    code = code.match(pattern);
    for (i = 0; i < code.length; i++) {
        document.write($2<br />'));
    }

});

</script>

Since you know JQuery,why don't you try `$(".list a").each(function(){ //do some thing})` — Jarvan, May 10 '13 at 06:07
should $.getJSON be used here to get html... would $.ajax yield better results? — Orangepill, May 10 '13 at 06:39

score 1 · Answer 1 · edited May 23 '17 at 12:13

1

It looks like you're trying to parse HTML with regex. This post has some more info on that topic.

Since this question is tagged as jQuery, you could try something like the following...

Make a jQuery object out of the returned HTML:

$markup = $(data.contents);

Find the anchors:

$anchors = $markup.find('a');

Get the text (or whatever attribute you want from it):

arrText = [];
$anchors.each(function() {
    arrText.push($(this).text());
});

Put result into textarea:

$textarea.val(arrText.join(','));

edited May 23 '17 at 12:13

Community

1
1

answered May 10 '13 at 06:11

Zhihao

14,758
2
26
36

thanks all for reply. Zhihao i tried your solution no data in text area:$markup = $(code); $anchors = $markup.find('a'); arrText = []; $anchors.each(function() { arrText.push($(this).text()); }); myTextarea.value = arrText.join(','); – user1788736 May 10 '13 at 06:25
@user1788736 I'm sorry, but I don't understand what you mean by "no data in text area". From your question, I assumed the HTML you were getting in your response would be in `data.contents`. Please correct me if I am wrong. – Zhihao May 10 '13 at 06:28
zhihao data.contents is orginal html. but i made it shorter (code hold data i want to extract from)so i avoid non necessarily hyperlinks in orginal html code. so i want to exctract all hyperlink titles from "code" and palce them in textarea. – user1788736 May 10 '13 at 06:43
@user1788736 Thanks for the clarification. I don't understand what issue you're having now though. You mentioned "tried [my] solution no data in text area". What exactly is happening or not working? The solution I provided should provide a general guideline to how you can get the text inside the anchors from the HTML string of the response. – Zhihao May 10 '13 at 06:58

score 0 · Answer 2 · answered May 10 '13 at 06:14

To achive this jquery is the simplest solution, you can try below code

$('a').each(function(){
    var copiedTitle = $(this).html();
    var previous = $('#test').html();
    var newText = previous +"\n"+ copiedTitle;
        $('#test').html(newText);
        });

JS Fiddle

How to extract all hyperlink titles from big html string using javascript?

2 Answers2