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

【问题标题】：How to link to highlighted text on another page如何链接到另一个页面上突出显示的文本
【发布时间】：2011-04-17 20:43:24
【问题描述】：

我有一个静态 HTML 页面，我在其中使用 span 标签和 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 重新。突出显示

.highlight {background:#bcdbda;}

Javascript 重新。突出显示

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

【问题讨论】：

标签： javascript css transparency highlighting html

【解决方案1】：

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

https://chromestatus.com/feature/4733392803332096

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

我是 javascript 新手，所以这个解决方案有点过头了。我不确定如何将其应用于我的问题。不过，谢谢。
好的，没问题。 @Greg 发布了您更简单的示例。在目标页面上的 body 标记内的 onload 事件上调用他的函数，如下所示：<body onload="CheckForHighlight()">.

【解决方案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 变量。脑力锻炼给你！

【讨论】：

格雷格：原谅我的无知。我是 JavaScript 新手。我在哪里调用函数？在我的链接中是这样吗？