CODEWITHSUNDEEP
javascriptjquery
Ilja
Ilja

Reputation: 46479

Get contents of <h1> convert them it to text and set as a title of the page

I've got following structure of h1 element

<h1>
<a href="#">My Text</a> <span>More Text</span> another text <a href="#">and a bit more</a>
</h1>

How can I get contents from such h1 and convert them to text so the output would be "My Text More Text another text and a bit more"

and after that place it into the <title> of the page? So no links, spans etc.. Just text?

Upvotes: 6

Views: 25663

Answers (3)

Ian
Ian

Reputation: 50905

Without jQuery, you can access the <h1>'s textContent property (innerText in old IE), and you can change document.title (like modifying the <title></title>). Here's an example:

var text = "textContent" in document.body ? "textContent" : "innerText";
document.title = document.getElementsByTagName("h1")[0][text];

Depending on how you want to target the <h1>, you can change the document.getElementsByTagName("h1")[0].

Also, I'm not sure how it affects the title, but the whitespace before the first <a> and after the last </a> will be included unless you trim the string. So maybe turn it into:

function trim(s) {
    if (typeof s === "string") {
        s = s.replace(/^\s+|\s+$/g, "");
    }
    return s;
}

var el = document.getElementsByTagName("h1")[0],
    text = "textContent" in el ? "textContent" : "innerText";
document.title = trim(el[text]);

DEMO: http://jsfiddle.net/tzGzC/

Of course, with just jQuery, it's a lot simpler:

var el = $("h1").eq(0),
    text = el.text();
document.title = $.trim(text);

DEMO: http://jsfiddle.net/kMXLW/

References:

Upvotes: 9

j08691
j08691

Reputation: 207900

With jQuery it's just:

$('title').text($('h1').text());

Upvotes: 5

This Guy
This Guy

Reputation: 27

var h1content = document.getElementById("h1").innerHTML;
// stripped string taken from http://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/
var newTitle = h1content.replace(/(<([^>]+)>)/ig,"");
document.title = newTitle;

Something to note, crawlers do NOT follow Javascript code, meaning that although this will change the title of the page, it will not be Search Engine Optimized.

Upvotes: 1

Related Questions