如何链接到另一页上的突出显示的文本

Question

我有一个静态HTML页面，我在其中使用跨度标签和JavaScript突出显示文本的选定部分。在单独的页面上，我想链接回此HTML页面，并已指定活动突出显示。 请参见下面提供的代码。

问题是必需的style =“ background：transparent”标签。它必须存在，以便突出显示仅在单击时才处于活动状态，但这也意味着当我尝试链接到下面指定的此页面时，突出显示不处于活动状态。

任何帮助将不胜感激。谢谢。

单击此链接突出显示文档中文本的指定部分。

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

这是单击时突出显示的文本。

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

链接到突出显示页面的代码。

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

CSS re。突出显示

.highlight {background:#bcdbda;}

Javascript re。突出显示

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

Answer 1

当单击指向突出显示起作用的页面的链接（<a href="j_62sept.html?highlight=Warscape"> ）时，您需要以某种方式读取该页面上的querystring值以突出显示正确的跨度。您可以为此使用javascript。参见以下示例：http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx

Answer 2

这是一个有趣的问题。如果您想让javascript在url参数中使用，可以使用window.location.href参数将其提取出来。因此，非常简单地执行以下功能：

function CheckForHighlight(){
    href = window.location.href;
    values = href.split('?')[1] // Remove the url
    highlight = values.split('=')[1]; // Grab the second parmeter
    highlightSpan(highlight); // Highlight it!

}

请注意，这是一个非常基本的示例。我鼓励通过简单学习，并且可以扩展此功能以动态解析所有url变量。为您锻炼大脑！

Answer 3

我认识到这是一个旧线程，但是现在可以使用此处描述的Scroll to Text Fragment功能解决Chrome的此问题：

https://chromestatus.com/feature/4733392803332096

简而言之，它允许您提供一个链接，该链接跳到特定的文本字符串，并且（在Chrome的实现中）突出显示该部分。链接的基本版本如下所示：

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