如何在html字符串中获取标题标签？答案

【问题标题】：How to get title tag in a string of html?如何在html字符串中获取标题标签？
【发布时间】：2012-11-07 07:40:19
【问题描述】：

嘿，我正在使用 ajax 将 html 页面加载到字符串中，现在我想找到页面的标题并使用它。

现在我确实设法使用正则表达式获得了<title>，但它返回了标签以及标题本身，我希望从字符串中提取它，或者在正则表达式中是否有办法做到这一点？

这是我的代码：

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

现在我如何获得 this/ 而不是 this 之后的实际标题？

【问题讨论】：

用jquery挑出标题标签...不要用正则表达式。
它在一个不在文档中的字符串内
我知道这一点，但我看到了解析 HTML 字符串并对其进行操作的解决方案。编辑：找到stackoverflow.com/questions/704679/…
如果您向我展示这些解决方案的链接，我会很高兴，因为这可以为我节省大量时间。
@nhahtdh 如果您作为答案提交，我会投赞成票，提交者可能应该接受它。这是最干净的方法。

标签： javascript jquery regex

【解决方案1】：

.match() 返回匹配数组，使用

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

获取括号中的值

【讨论】：

谢谢你，这确实有效。但是有没有更好的方法来获取标题标签？
如果你使用 html 作为字符串，你可以使用/<title>(.*?)</title>/i regexp。如果您使用 jquery，您可以创建文档片段并从中选择值$(yourHtmlString).find('title').text()

【解决方案2】：

代码：

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

【讨论】：

【解决方案3】：

像这样将响应的 html 字符串加载到 jQuery 对象中并检索文本

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

【讨论】：

该文档是对 ajax 请求的响应。因此它可能无法通过 document.title 访问
由于某种原因（jQuery 1.9.1），这对我不起作用，我不得不将响应放在一个 div 中并将其加载到一个 jQuery 对象中：var div = document.createElement('div'); div.innerHTML = response; $(div).find('title').text();

【解决方案4】：

使 reg exp 不区分大小写。完整代码如下：

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!");
}

【讨论】：

【解决方案5】：

一种相对简单的纯 JavaScript 和非正则表达式方法：

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.

显然，我不得不猜测您的 HTML 字符串，并从内容周围删除了包含 <html>/</html> 的（假定存在的）标签。但是，即使这些标签在字符串中，它仍然有效：JS Fiddle demo。

还有一种更实用的方法：

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.

【讨论】：

惊人的答案，没有正则表达式！！！我一直在尝试从 html 字符串中提取第一、第二、第三img 标签的子字符串和长度。现在这太容易了！！！

【解决方案6】：

试试这个，我认为这会有所帮助。它在我的情况下非常有效。 :)

 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");

【讨论】：

【解决方案7】：

正则表达式不是在 HTML 中查找内容的好方法，这对于简单的一次性正则表达式来说太复杂了。（请参阅有关此主题的 famous post。）改为使用 DOMParser 的 parseFromString，然后查看生成的文档：

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);

【讨论】：