How to get title tag using jQuery?

Question

I have some html in string form.

var html = "
<html>
  <head>
    <title>
      Some Text
    </title>
  </head>
  <body>
    <h1>
      My First Heading
    </h1>
    <p>
      My first paragraph.
    </p>
  </body>
</html>
";

It has title tag inside it. How can I get the text inside title tag using jquery or javascript?

Your HTML is invalid as `title` should be in the `head`, not the `body`. — Rory McCrossan, May 15 '14 at 14:39
@NiettheDarkAbsol that will get the title of the document being viewed, not the `title` element within the string. — Rory McCrossan, May 15 '14 at 14:39
`alert(html.match(/(.*?)<\/title>/)[1]);` at the risk of ponies. — Niet the Dark Absol, May 15 '14 at 14:42
Seems like the question is more about extracting a string from within a string than about getting the title of some html document. — frenchie, May 15 '14 at 14:49

score 31 · Accepted Answer · answered May 15 '14 at 14:40

31

Just try with:

var title = $(html).filter('title').text();

answered May 15 '14 at 14:40

hsz

148,279
62
259
315

Sorry.. my mistake. I was thinking of another html. – putvande May 15 '14 at 14:44
1

``html`` is as ``document``?? – Ehsan Sajjad May 15 '14 at 14:45
@EhsanSajjad It's a variable defined by OP (in his question). – hsz May 15 '14 at 14:45
but if on a page i want to get title tag, how i can get? – Ehsan Sajjad May 15 '14 at 14:46
2

For example with: `$('head title').text()` – hsz May 15 '14 at 14:47
1

document.getElementsByTagName('title') – griffon vulture May 15 '14 at 14:55
if I am not crazy and there are not more than 1 head and 1 title, then why not `jQuery("head title");` – argentum47 Jul 04 '15 at 07:54

score 7 · Answer 2 · answered May 15 '14 at 16:08

7

Just because no one mentioned it so far, you could also use document.implementation.createHTMLDocument() for that purpose.

var domstr = "<html><head><title>Some Text</title></head><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>";
    doc    = document.implementation.createHTMLDocument('1337');
    doc.documentElement.innerHTML = domstr;

alert( doc.title );

answered May 15 '14 at 16:08

jAndy

231,737
57
305
359

No need of doc = document.implementation.createHTMLDocument('1337'); – Ramesh May 15 '14 at 16:15

score 5 · Answer 3 · answered May 15 '14 at 15:27

5

This is my crack at it. Create a documentFragment add an element to it and use querySelector to get the element and then textContent to get the text.

var html = "<html><head><title>Some Text</title></head><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>",
    docFrag = document.createDocumentFragment(),
    el = document.createElement('html');

el.innerHTML = html;
docFrag.appendChild(el);

var text = docFrag.querySelector('title').textContent;

Live Demo

answered May 15 '14 at 15:27

Loktar

34,764
7
90
104

+1 Just note that the compatibility is limited : IE7 isn't at the party – Denys Séguret May 15 '14 at 15:29
@dystroy good point, but to fix that they could always use `getElementsByTagName('title')` to get the element I suppose. – Loktar May 15 '14 at 15:31
I'm putting this on all my production sites ASAP. Thank you @Loktar! Everyone use this solution – May 15 '14 at 15:31
4

@Jhawins hahah whatever – Loktar May 15 '14 at 15:32

score 4 · Answer 4 · edited May 15 '14 at 15:53

4

How about using the DOMparser

var html  = "<html><head><title>Some Text</title></head><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>",
    doc   = (new DOMParser()).parseFromString(html, 'text/html');
    title = doc.title;

Note: This is not supported on any version of Safari

FIDDLE

edited May 15 '14 at 15:53

answered May 15 '14 at 15:34

adeneo

312,895
29
395
388

nice +1 have never used `DomParser` personally. – Loktar May 15 '14 at 15:35
3

Nice +1 but only from IE10 *EDIT : and no Safari* – Denys Séguret May 15 '14 at 15:36

score 4 · Answer 5 · answered May 18 '16 at 05:30

In JavaScript, simply

document.title

For sample code

<html>
    <head>
        <title>My Page Title</title>
    </head>
    <body>
        <p id="demo"></p>
        <script>
            document.getElementById("demo").innerHTML = document.title;
        </script>
    </body>
</html>

griffon vulture · Answer 6 · 2014-05-15T15:00:00.733

1

html.match(/<title>(.*)<\/title>/)[1]

edited May 15 '14 at 15:00

answered May 15 '14 at 14:45

griffon vulture

6,594
6
36
57

2

http://stackoverflow.com/questions/590747/using-regular-expressions-to-parse-html-why-not – epascarello May 15 '14 at 14:45

score 1 · Answer 7 · answered May 15 '14 at 14:45

1

Obviously not preferred if you can use jQuery, but for pure Javascript:

/<title>(.*)<\/title>/.exec(html)[1]

answered May 15 '14 at 14:45

ach

6,164
1
25
28

http://stackoverflow.com/questions/590747/using-regular-expressions-to-parse-html-why-not – epascarello May 15 '14 at 14:52
1

Yeah, we get it -- pasting that link once per question is probably enough. I even stated that the jQuery answer is preferred, I was just trying to provide a pure Javascript alternative. Thanks for the downvote though. – ach May 15 '14 at 15:22
@Ach your answer isn't "acceptible" it isn't even functional for other cases of parsing HTML. The question here is how to extract data from an HTML string based on tags. Your answer works in this one specific case, but is worthless and guarantees problems. Your answer should be deleted. Downvote is from me. – May 15 '14 at 16:27

score 0 · Answer 8 · answered May 15 '14 at 14:59

0

html.substring(html.indexOf('<title>')+7, html.indexOf('</title>'))

answered May 15 '14 at 14:59

Jalay

66
1
7

Ramesh · Answer 9 · 2014-05-15T15:17:53.733

0

You can get that text by using this jQuery selector.

$(function(){
var html = "<html><head><title>Some Text</title></head><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>";
var titleHTML = $(html).find("title").html();
alert(titleHTML);
});

It will alert "Some Text"

edited May 15 '14 at 15:17

answered May 15 '14 at 15:07

Ramesh

1,829
2
25
30

1

-1 This will return the title of the current document. It's just like `document.title`. – Denys Séguret May 15 '14 at 15:10
1

You don't get it : your code doesn't extract the title from the given html string. – Denys Séguret May 15 '14 at 15:16
yes, now it will work, but now that's the same answer than already made (with useless additions). – Denys Séguret May 15 '14 at 15:21

score 0 · Answer 10 · answered Apr 27 '17 at 20:57

0

You can also try this:

$('head > title').text();

answered Apr 27 '17 at 20:57

Fahim Hossain

1,671
13
16

How to get title tag using jQuery?

10 Answers10