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

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

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