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

Question

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

问题在于所需的 style="background:透明" 标记。它必须在那里，以便突出显示仅在单击时才处于活动状态，但这也意味着当我尝试链接到以下指定的此页面时，突出显示不处于活动状态。

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

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

<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 重新。突出显示

.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

我知道这是一个旧线程，但现在可以使用此处描述的滚动到文本片段功能来解决 Chrome 的此问题：

https://chromestatus.com/feature/4733392803332096

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

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

Answer 2

当您单击突出显示执行操作的页面的链接时 (
）您需要以某种方式读取该页面上的查询字符串值以突出显示正确的跨度。您可以为此使用 JavaScript。请参阅此示例： http://www .bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx

Answer 3

这是一个有趣的问题。如果您想让 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 变量。给你的大脑锻炼！