在網頁中的單詞之間繪制鏈接

Question

我想知道在HTML / CSS / Javascript中是否可以進行類似這樣的操作（請參見上圖），如果可以，那么我應該研究哪些框架/技術。

我在HTML頁面中有一個文本，我想根據不同的含義使用不同的顏色突出顯示其中的一些單詞（假設3種類型，“軟件名稱”：藍色，“數字”：灰色，“人物名稱： '紅色'）。 然后，這對我來說是一個棘手的部分，我想在這些突出顯示的單詞之間繪制有向箭頭，以便調整窗口大小將自動保持錨定箭頭，而不管單詞的位置如何變化。

現在，我正在使用突出顯示單詞的特定標簽和具有相應背景色屬性的臨時CSS裝飾器來解決突出顯示部分。 對我而言，鏈接部分實際上是個謎。

我感謝大家的幫助，米歇爾。

PS。 我更願意在客戶端這樣做。

Answer 1

您需要為此執行大量JavaScript代碼，但我只會簡單地告訴您這些步驟。 為了實現您的目標，您需要：

• 使用split()方法解析段落中的每個單詞。

  var words = yourparagraph.split(" ");

• 創建一個包含名為name_of_software的數組，並將軟件名稱推name_of_software該數組中。

• 為人員名稱做最重要的事情，並調用數組people_names 。

  var name_of_software = ["html", "css", "javascript"];

  var people_names = ["michele", "george", "john"];

• 為突出顯示創建相應的CSS。

  span.red { background: red; overflow: hidden; display: block; }

  span.grey { background: grey; overflow: hidden; display: block; }

  span.blue { background: blue; overflow: hidden; display: block; }

• 做這樣的循環：

。

for(var i = 0; i < words.length; i++)
{
    if($.inArray(words[i].toLowerCase(), name_of_software)) {
        // The word is a name of a software. Give blue class.
    } else if($.inArray(words[i].toLowerCase(), people_names)) {
        // The word is a name of a person. Give red class.
    } else if(isNaN(words[i])) {
        // The word is a number. Give grey class.
    }
}

我沒有測試它或創建它的工作版本。 希望此步驟將指導您實現目標。