How to get title tag in a string of html?

Question

Hey i'm loading an html page using ajax into a string, now i want to find the title of the page and use it.

Now i did manage to get the <title> using regex but that returns the tag along with the title itself and i wish to extract that from the string or could there be a way to do that in the regex?

This is my code :

var title = result.match(/<title[^>]*>([^<]+)<\/title>/);

Now how do i get the actuall title after this/ instead of this?

I'm aware of that, but I have seen solution that parses the HTML string and operates on it. EDIT: Found http://stackoverflow.com/questions/704679/parse-html-string-with-jquery — nhahtdh, Nov 19 '12 at 11:34
I'd be happy if you showed me some link to those solutions, as this could save me alot of time. — eric.itzhak, Nov 19 '12 at 11:35
@nhahtdh if you submit as answer, I'd vote it up, and submitter should probably accept it. It is the cleanest way hands down. — tucuxi, Nov 19 '12 at 11:37

score 17 · Answer 1 · answered Nov 19 '12 at 11:32

17

.match() returns array of matches, use

var title = result.match(/<title[^>]*>([^<]+)<\/title>/)[1];

to get value in parentheses

answered Nov 19 '12 at 11:32

Ivan Solntsev

2,081
2
31
40

Thank you ivan this did work. But is there some better way to get the title tag? – eric.itzhak Nov 19 '12 at 11:36
if you working with html as string, you can use `/(.*?)/i` regexp. if you use jquery, you can create document fragment and pick value from it `$(yourHtmlString).find('title').text()` – Ivan Solntsev Nov 19 '12 at 11:39

Bruno · Accepted Answer · 2012-11-19T11:41:49.687

13

load your response html string into a jQuery object like so and retrieve the text

$(response).find("title").text();

edited Nov 19 '12 at 11:41

answered Nov 19 '12 at 11:36

Bruno

5,772
1
26
43

The document is a response to an ajax request. Hence it may not be accessible via document.title – devsathish Nov 19 '12 at 11:39
4

this didn't work for me directly for some reason (jQuery 1.9.1), I had to put the response in a div and load that into a jQuery object instead: `var div = document.createElement('div'); div.innerHTML = response; $(div).find('title').text();` – Veli Gebrev Feb 19 '15 at 08:39

David Thomas · Answer 3 · 2012-11-19T11:55:31.540

A relatively simple plain-JavaScript, and non-regex, approach:

var htmlString = '<head><title>Some title</title></head><body><p>Some text, in a paragraph!</p></body>',
    html = document.createElement('html'),
    frag = document.createDocumentFragment();
html.innerHTML = htmlString;
frag.appendChild(html);

var titleText = frag.firstChild.getElementsByTagName('title')[0].textContent || frag.firstChild.getElementsByTagName('title')[0].innerText;

console.log(titleText);

JS Fiddle demo.

I've, obviously, had to guess at your HTML string and removed the (presumed-present) enclosing <html>/</html> tags from around the content. However, even if those tags are in the string it still works: JS Fiddle demo.

And a slightly more functional approach:

function textFromHTMLString(html, target) {
    if (!html || !target) {
        return false;
    }
    else {
        var fragment = document.createDocumentFragment(),
            container = document.createElement('div');
        container.innerHTML = html;
        fragment.appendChild(container);
        var targets = fragment.firstChild.getElementsByTagName(target),
            result = [];

        for (var i = 0, len = targets.length; i<len; i++) {
            result.push(targets[i].textContent || targets[i].innerText);
        }
        return result;        
    }
}

var htmlString = '<html><head><title>Some title</title></head><body><p>Some text, in a paragraph!</p></body></html>';

var titleText = textFromHTMLString(htmlString, 'title');

console.log(titleText);

JS Fiddle demo.

Amazing answer, no regex!!! I've been banging my head with substrings and lengths trying to extract first, second, third `img` tags from an html string. This is so easy now!!! — denikov, May 26 '15 at 14:34

score 3 · Answer 4 · answered Nov 19 '12 at 11:36

3

CODE:

var title = result.match("<title>(.*?)</title>")[1];

answered Nov 19 '12 at 11:36

palaѕн

72,112
17
116
136

score 0 · Answer 5 · answered Nov 19 '12 at 11:37

Make the reg exp to case insensitive. Here is the complete code:

var regex = /<title>(.*?)<\/title>/gi; 
var input = "<html><head><title>Hello World</title></head>...</html>";
if(regex.test(input)) {
  var matches = input.match(regex);
  for(var match in matches) {
    alert(matches[match]);
  } 
} else {
  alert("No matches found!");
}

Iron shield · Answer 6 · 2020-01-02T04:37:10.123

0

try this I think this will help. It perfectly works in my case. :)

 var FindTag=(data='',tag='')=>{
    var div=document.createElement('div');
    div.innerHTML=data;
    data=$(div).find(tag)[0].outerHTML;
    return data;
 }

var data=FindTag(data,"title");

edited Jan 02 '20 at 04:37

answered Jan 02 '20 at 04:28

Iron shield

329
4
9

score 0 · Answer 7 · answered Jul 26 '21 at 17:42

Regular expressions aren't a good way to look for things in HTML, which is too complex for a simple one-off regex. (See the famous post on this topic.) Instead, use DOMParser's parseFromString and then look in the resulting document:

const html = "<!doctype html><head><title>example</title>";

const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
const title = doc.querySelector("title");
console.log(title.textContent);

How to get title tag in a string of html?

7 Answers7

Linked