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

Question

我想知道在HTML / CSS / Javascript中是否可以使用这样的东西（见上图），如果有的话，我应该看看哪些框架/技术。

我在HTML页面中有一个文字，我想根据不同的含义使用不同的颜色突出显示其中的一些单词（让我们说3种类型，＆＃39;软件名称＆＃39 ;:蓝色，＆＃39;数字＆＃39;：灰色，＆＃39;人名：＆＃39;红色＆＃39;）。然后，这对我来说是一个棘手的部分，我想在这些突出显示的单词中绘制有向箭头，以便调整窗口大小将自动保持箭头锚定，而不管单词的更改位置。

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

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

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

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 { 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.
    }
}

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