[英]Drawing links among words in a web page
I would like to know if something like this (see the picture above) is possible in HTML/CSS/Javascript and if so, what are the frameworks/technology that I should look at. 我想知道在HTML / CSS / Javascript中是否可以进行类似这样的操作(请参见上图),如果可以,那么我应该研究哪些框架/技术。
I have a text in a HTML page and I would like to highlight some words in it using different colours according to different meanings (let's say 3 types, 'name of software': blue, 'numbers': grey, 'name of people: 'red'). 我在HTML页面中有一个文本,我想根据不同的含义使用不同的颜色突出显示其中的一些单词(假设3种类型,“软件名称”:蓝色,“数字”:灰色,“人物名称: '红色')。 Then, an this is the tricky part for me, I would like to draw directed arrows among these highlighted words in a way that resizing the window will automatically keep anchored the arrows regardless to the changed position of the words. 然后,这对我来说是一个棘手的部分,我想在这些突出显示的单词之间绘制有向箭头,以便调整窗口大小将自动保持锚定箭头,而不管单词的位置如何变化。
Right now I am solving the highlighting part using a particular tag for the words to be highlighted and an ad-hoc CSS decorator with the property background colour accordingly set. 现在,我正在使用突出显示单词的特定标签和具有相应背景色属性的临时CSS装饰器来解决突出显示部分。 The linking part is literally a mystery for me. 对我而言,链接部分实际上是个谜。
I thank you all for your help, michele. 我感谢大家的帮助,米歇尔。
PS. PS。 I would prefer doing that on the client side. 我更愿意在客户端这样做。
You need to do loads of JavaScript code for this but I will simply tell you the steps. 您需要为此执行大量JavaScript代码,但我只会简单地告诉您这些步骤。 To achive your goal you need to: 为了实现您的目标,您需要:
parse every word in your paragraph by using split()
method. 使用split()
方法解析段落中的每个单词。
var words = yourparagraph.split(" ");
create an array that contains called name_of_software
and push the software names in this array. 创建一个包含名为name_of_software
的数组,并将软件名称推name_of_software
该数组中。
do the very above thing for people names and call the array people_names
. 为人员名称做最重要的事情,并调用数组people_names
。
var name_of_software = ["html", "css", "javascript"];
var people_names = ["michele", "george", "john"];
create corresponding css for the highlightings. 为突出显示创建相应的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; }
Do a loop like this: 做这样的循环:
. 。
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.
}
}
I didn't test it or create a working version of it. 我没有测试它或创建它的工作版本。 Hope this steps will guide you to achive your goal. 希望此步骤将指导您实现目标。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.