javascript - 在网页中绘制单词之间的链接

Question

我想知道这样的事情(见上图)在 HTML/CSS/Javascript 中是否可行，如果可行，我应该关注哪些框架/技术。

我在 HTML 页面中有一个文本，我想根据不同的含义使用不同的颜色突出显示其中的一些单词(假设有 3 种类型，“软件名称”:蓝色，“数字”:灰色，“名称”人:'红色')。然后，这对我来说是棘手的部分，我想在这些突出显示的单词之间绘制定向箭头，无论单词的位置如何改变，调整窗口大小都会自动保持箭头锚定。

现在我正在解决突出显示部分，使用一个特定的标签来突出显示单词，并使用一个具有相应设置的属性背景颜色的临时 CSS 装饰器。链接部分对我来说简直是个谜。

谢谢大家的帮助，米歇尔。

附言。我更愿意在客户端这样做。

Answer 1

您需要为此编写大量 JavaScript 代码，但我将简单地告诉您步骤。为了实现您的目标，您需要:

• 使用 split() 方法解析段落中的每个单词。

  var words = yourparagraph.split("");

• 创建一个包含名为 name_of_software 的数组，并将软件名称推送到该数组中。

• 对人名执行上面的操作并调用数组 people_names。

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

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

• 为突出显示创建相应的 css。

  span.red { 背景:红色；溢出:隐藏；显示: block ； }

  span.grey { 背景:灰色；溢出:隐藏；显示: block ； }

  span.blue { 背景:蓝色；溢出:隐藏；显示: 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.
    }
}

我没有测试它或创建它的工作版本。希望这些步骤将指导您实现目标。