-3

I have to try retrieve "Charlotte" from this piece of HTML code, using regex:

<a href="/anime/28999/Charlotte" target="_blank" class="animetitle" title="Anime Information">
    <span>Charlotte</span>
</a>

The issue is, I need to get the name "Charlotte" out from the class each and every time, for different titles. Whether this be from the href attribute or the span tags.

I've tried:

<span(?:[^>]+class=\"(.*?)\"[^>]*)?>(.*?)<\/span>

However this only works for the first result it finds. I cannot use a parser at this stage, so any help on this if possible will be very appreciated.

Side note - I'm trying to use this regex under JavaScript.

EDIT: The html is being retrieved through XMLHttpRequest

sgript
  • 317
  • 1
  • 2
  • 10

2 Answers2

0

edit

Because of your comment:

Cannot use jquery, I'm using XMLHttpRequest

The point of the answer wasn't to recommend a specific library. The intent is to show that it's best to natively traverse the DOM rather than attempting to "parse" HTML with regular expressions, which usually doesn't work out well in the end (see this famous answer on SO).

I assume you're getting that HTML as your XHR response. So, you can simply create a DOM node, traverse that, and pull the text out (see this answer for an explanation):

var div = document.createElement('div');
div.innerHTML = response; // the response of your XHR

Then just traverse the DOM node you've created:

div.getElementsByClassName('.animetitle')[0].textContent; // Charlotte

original answer

var href = $('.animetitle').attr('href');
var name = href.split('/').pop(); // => Charlotte
Community
  • 1
  • 1
Josh Beam
  • 19,292
  • 3
  • 45
  • 68
0

Disclaimer: I'm not actually answering your question, i'm suggesting a different approach.

Try selecting the element with JavaScript, and then read the attribute itself. It is both safer and faster. And it's also probably more robust against future changes.

var elements = document.getElementsByClassName('animetitle');
var element = elements[0]; // this would probably be in a loop
element.textContent // <-- this is what you want
amenthes
  • 3,117
  • 1
  • 32
  • 38
  • It would be nice if the downvoter could explain why he/she downvoted? (the "not answering" means: i don't give you a *regex* even though you asked for one. Still: i think this is the best solution to your problem.) – amenthes Aug 13 '15 at 21:35
  • Upvoted, at least you're being helpful. I updated my OP, I'm not sure this will work for XMLHttpRequest however? Currently away from my machine. – sgript Aug 13 '15 at 22:25
  • according to [MDN](https://developer.mozilla.org/de/docs/Web/API/XMLHttpRequest) XMLHttpRequest _can_ return a [Document](https://developer.mozilla.org/de/docs/Web/API/Document)-Object. In that case, your `xhr.result` should actually have a `getElementsByClassName` method. – amenthes Aug 13 '15 at 22:28
  • found it: if you set `xhr.responseType` to `"document"` it should be possible to do this directly. Otherwise: if you have jQuery in your project, you can always just use their selectors instead. – amenthes Aug 13 '15 at 22:29
  • Selectors are what I would have preferred, but unfortunately cannot use them. If possible can you update your answer? I'll be back tomorrow and see how this method goes! – sgript Aug 13 '15 at 22:32
  • @slrpies if this has helped you, you can also "accept" the answer. – amenthes Oct 08 '15 at 20:34