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?

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?

• javascript
• jquery

• 5 var text = "textContent" in document ? "textContent" : "innerText"; document.title = document.getElementsByTagName("h1")[0][text]; – Ian Commented Jun 5, 2013 at 20:40
• 1 @Ian 40 wish this were an answer. Here's a virtual +1! – krishwader Commented Jun 5, 2013 at 20:42
• 1 @Ian Would you like to post this as an answer so I can accept it? – Ilja Commented Jun 5, 2013 at 20:46

3 Answers 3

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:

• document.title: https://developer.mozilla.org/en-US/docs/Web/API/document.title
• .textContent: https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent

With jQuery it's just:

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

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.