如何实现单词或句子划线的叠加功能

这样的一个需求：页面上有一段文章，然后希望点击一个单词就划条线，点击2个或多个也划一条，或者句子再划一条，然后它们可以叠加。
比如这样：有一个句子I am a girl. 第一次点am划线，第2次点I am划线，然后两条线重叠， 第3次可能点I am a ，然后am就划3条线了，I am 划2条线，I am a划一条线。由于线的样式是多样的，所以不能用u，而是用自己写的css，然后这里叠加的线有可能一样，有可能不一样。
只划一条线的话，已经实现了，可是却还没实现多条线叠加，同一个句子里怎么去得到不同内容，得到的是一个单词或2个单词又或者是这个句子，然后再给内容划线？？
不知道我的意思讲明白没，希望大家可以帮帮忙！