javascript - 获取内容

Question

我有以下h1元素结构

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

如何从中获取内容h1并将它们转换为文本，以便输出为"My Text More Text another text and a bit more"

然后将其放入<title>页面中？所以没有链接、跨度等。只是文本？

Answer 1

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

Answer 2

使用 jQuery，它只是：

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

Answer 3

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;

需要注意的是，爬虫不遵循 Javascript 代码，这意味着虽然这会改变页面的标题，但它不会经过搜索引擎优化。