简单的标注实现

标注实现思路

标注系统核心思路将文本遍历替换为标签包裹的文本(list),根据鼠标划过动作获取划词信息(包括:内容,位置信息等)标注结束将文本内容与标注的label序列化储存在标签包裹的数组中,完成与后台数据传输

本工程采用技术栈为 uni-appuView

  1. 文本转换

    
    /**
    
     \* 文本转化为 数组文本
    
     \* @param  {String} str 原始文本
    
     */
    
    export function getContent(str) {
    
        let arr = [];
    
        for (var i = 0; i < str.length; i++) {
    
            arr.push(str.charAt(i));
    
        }
    
        return arr;
    
    }
    
    
    
    
  2. 划词替换

    根据划词信息,获取位置和文本对含有标签得数组对应位置进行替换

/**

  \* 划词后 文本转化

  \* @param  {Array} arr 划词后数组

  \* @param  {Object} obj 划词

  \* @param  {number} model 划词模式 默认为 1

  */

 export function getMarkContent(arr, obj, dom, model) {

     let content = '';

     if (model === 0) {

         content = `${obj.text}$_#_$${dom.labelText}$_#_$${dom.id}$_#_$${createUUID()}`;

     } else {

         content = `${obj.text}$_#_$${dom.getAttribute('text')}$_#_$${dom.id}$_#_$${createUUID()}`;

     }

     arr.splice(obj.startIndex, obj.endIndex - obj.startIndex + 1, content)

     return arr;

 }

 /**

  \* 划词后 删除实体

  \* @param  {Array} initArr 划词后数组

  */

 export function getDeleteContent(initArr, index, text) {

     let changeArr = getContent(text);

     initArr.splice(index - 0, 1, changeArr[0]);

     for (var i = changeArr.length - 1; i > 0; i--) {

         initArr.splice(index - 0 + 1, 0, changeArr[i]);

     }

     return initArr;

 }

 

  1. 输出划词信息与后台交互

 {"id":"5e6767591676285644360517","initTxtArr":["分","泌","过","多","性","青","光","眼","(","h","y","p","e","r","s","e","c","r","e","t","i","o","n"," ","g","l","a","u","c","o","m","a",")","是","一种罕见的$_#_$2$_#_$1$_#_$2ec253be37cd4aab9a8471d4bf9bb243","特","殊","类","型","的","开","角","型","青","光","眼",",","其","特","点","是","眼","压","升","高",",","但","房","水","流","畅","系","数","正","常","\r","\n","泛","发","性","毛","囊","错","构","瘤","(","g","e","n","e","r","a","l","i","z","e","d"," ","f","o","l","l","i","c","u","l","a","r"," ","h","a","m","a","r","t","o","m","a","s",")","为","单","个","或","多","发","性","皮","肤","色","丘","疹","和","浸","润","性","斑","块",",","伴","发","进","行","性","毛","发","脱","落","、","重","症","肌","无","力","和","(","或",")","循","环","中","自","身","抗","体","(","抗","核","抗","体","和","乙","酰","胆","碱","受","体","抗","体",")","\r","\n","深","脓","疱","病","(","e","c","t","h","y","m","a",")","又","名","臁","疮",",","是","由","溶","血","性","链","球","菌","感","染","所","致","的","一","种","深","在","性","脓","疱","疮",",","基","本","损","害","为","脓","疱","及","被","粘","着","性","痂","所","覆","盖","的","溃","疡",",","主","要","侵","犯","小","腿","\r","\n","病","毒","性","肠","炎","(","v","i","r","a","l","g","a","s","t","r","o","e","n","t","e","r","i","t","i","s",")","又","称","病","毒","性","腹","泻",",","是","一","组","由","多","种","病","毒","引","起","的","急","性","肠","道","传","染","病","。","临","床","特","点","为","起","病","急","、","恶","心","、","呕","吐","、","腹","痛","、","腹","泻",",","排","水","样","便","或","稀","便",",","也","可","有","发","热","及","全","身","不","适","等","症","状",",","病","程","短",",","病","死","率","低","。","各","种","病","毒","所","致","胃","肠","炎","的","临","床","表","现","基","本","类","似","。","与","急","性","胃","肠","炎","有","关","的","病","毒","种","类","较","多",",","其","中","较","为","重","要","的","、","研","究","较","多","的","是","轮","状","病","毒","和","诺","沃","克","类","病","毒","。","此","外",",","嵌","杯","样","病","毒","、","肠","腺","病","毒","、","星","状","病","毒","、","柯","萨","奇","病","毒","、","冠","状","病","毒","等","亦","可","引","起","胃","肠","炎","。","本","病","无","特","效","疗","法",",","以","对","症","治","疗","为","主","。","暂","停","乳","类","及","双","糖","类","食","物","。","吐","泻","较","重","时","用","止","吐","剂","及","镇","静","剂","。","口","服","或","静","脉","补","液","以","纠","正","和","电","解","质","紊","乱","。"],"initTxt":"分泌过多性青光眼(hypersecretion glaucoma)是一种罕见的特殊类型的开角型青光眼,其特点是眼压升高,但房水流畅系数正常\r\n泛发性毛囊错构瘤(generalized follicular hamartomas)为单个或多发性皮肤色丘疹和浸润性斑块,伴发进行性毛发脱落、重症肌无力和(或)循环中自身抗体(抗核抗体和乙酰胆碱受体抗体)\r\n深脓疱病(ecthyma)又名臁疮,是由溶血性链球菌感染所致的一种深在性脓疱疮,基本损害为脓疱及被粘着性痂所覆盖的溃疡,主要侵犯小腿\r\n病毒性肠炎(viralgastroenteritis)又称病毒性腹泻,是一组由多种病毒引起的急性肠道传染病。临床特点为起病急、恶心、呕吐、腹痛、腹泻,排水样便或稀便,也可有发热及全身不适等症状,病程短,病死率低。各种病毒所致胃肠炎的临床表现基本类似。与急性胃肠炎有关的病毒种类较多,其中较为重要的、研究较多的是轮状病毒和诺沃克类病毒。此外,嵌杯样病毒、肠腺病毒、星状病毒、柯萨奇病毒、冠状病毒等亦可引起胃肠炎。本病无特效疗法,以对症治疗为主。暂停乳类及双糖类食物。吐泻较重时用止吐剂及镇静剂。口服或静脉补液以纠正和电解质紊乱。","dataSetId":6,"relationArr":[]}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容