如何突出显示任何网页的"headlines"？

Question

我正在尝试构建一个Chrome扩展，它可以自动突出显示网页的顶部标题
我有这样的代码，它使用HTML的id或元素
我遇到的问题是，不同的网站使用不同的元素，如h1 h2等，有时它不起作用。

简单的问题：如何突出显示任何网页标题(仅标题(

function highlight(text) {
var inputText = document.getElementById("title");
var innerHTML = inputText.innerHTML = text
var index = innerHTML.indexOf(text);
if (index >= 0) {
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML;
}
}
highlight("Title");

.highlight {
text-decoration: underline;
}

<h1 id="title">Heading</h1>

Answer 1

只需使用document.getElementsByTagName("h[NUM]");

function highlight(text) {
for(var i=1;i<=6;i++){ //since there is h1-h6 headers
var inputTexts = document.getElementsByTagName("h"+i);
for(var j=0;i<inputTexts.length;j++){
var innerHTML = inputTexts[j].innerHTML=text
var index = innerHTML.indexOf(text);
if (index >= 0) {
innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + 
innerHTML.substring(index,index+text.length) + "</span>" + 
innerHTML.substring(index + text.length);
inputTexts[j].innerHTML = innerHTML;
}
}
}

Answer 2

使用querySelectorAll可以使这变得更加容易。像这样：

var inputText = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

因此，该代码将确定哪个特定的h标签被注册在报头中。

同时添加索引。像这样：

inputText[i];

现在尝试手动更改代码HTML中的标记(从h1…h6(并运行该代码。

function highlight(text) {
var inputText = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
for( var i = 0; i < inputText.length; i++ ) {
inputText[i].classList.add('highlight');
}
}

highlight("Title");

.highlight {
text-decoration: underline;
}

<h3>Title</h3>