如何鏈接到另一頁上突出顯示的文本

Question

我有一個靜態 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";       
    } 
}
}

Answer 1

我認識到這是一個舊線程，但現在可以使用此處描述的滾動到文本片段功能為 Chrome 解決此問題：

https://chromestatus.com/feature/4733392803332096

簡而言之，它允許您提供一個跳轉到特定文本字符串的鏈接，並（在 Chrome 的實現中）突出顯示該部分。 鏈接的基本版本如下所示：

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

Answer 2

當您單擊指向突出顯示執行操作的頁面的鏈接 ( <a href="j_62sept.html?highlight=Warscape"> ) 時，您需要以某種方式讀取該頁面上的查詢字符串值以突出顯示正確的跨度。 您可以為此使用 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 變量。 腦筋急轉彎給你！