Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to link to highlighted text on another page

I have a static HTML page where I am using span tags and javascript to highlight selected portions of text. On a separate page, I would like to link back to this HTML page and have specified highlighting active. See provided code below.

The issue is the required style="background: transparent" tag. It has to be there so that the highlight is only active when clicked upon, but this also means that when I attempt to link to this page as specified below, the highlight is not active.

Any help would be much appreciated. Thanks.

Clicking this link highlights specified portions of text in the document.

<span title="Warscape"><a title="Warscape" onclick="highlightSpan(this.getAttribute('title'))" href="">Warscape</a></span>

This is the text that is highlighted when clicked.

<span title="Warscape" class="highlight" style="background: transparent">During this month while we have been building Fort No 1 Spring field Missouri, quite a No of Regiments have arrived from the north &amp; now the Army of the Frontier [is?] formed</span>

Code to link to page with highlighting.

<a href="j_62sept.html?highlight=Warscape">

CSS re. highlighting

.highlight {background:#bcdbda;}

Javascript re. highlighting

function highlightSpan(spanTitle)
{
var spans = document.getElementsByTagName("span");
// take away color
for (var i = 0; i < spans.length; ++i)
{
    spans[i].style.backgroundColor = "transparent";
}
// add color
for (var i = 0; i < spans.length; ++i)
{
    if (spans[i].getAttribute('title') == spanTitle)
    { 
        spans[i].style.backgroundColor = "#bcdbda";       
    } 
}
}
like image 762
Kaci Avatar asked Dec 08 '25 23:12

Kaci


1 Answers

I recognise that this is an old thread, but this problem can now be addressed for Chrome using the Scroll to Text Fragment feature described here:

https://chromestatus.com/feature/4733392803332096

In short, it allows you to provide a link which jumps to a specific string of text and (in Chrome's implementation) highlights that section. A basic version of the link would look like this:

https://en.wikipedia.org/wiki/Cat#:~:text=Felis%20catus

like image 198
sahmeepee Avatar answered Dec 11 '25 12:12

sahmeepee