首页 > 其他 > 详细

浮动到表格中某一行,根据改行信息高亮某区域文字,并设置对应滚动高度,使高亮文字出现在当前视野

时间:2017-11-29 18:51:52      阅读:293      评论:0      收藏:0      [点我收藏+]

事先说明,此代码结合应用项目场景,故这里的代码很难理解,纯本人笔记

            highlightOpinion: function (opinion) {
                $scope.mark.highlightContent = $scope.mark.highlightContentStore;//highlightContentStore是后台接受不带高亮效果的文字

                var reg = new RegExp();
                var replaceStr = ‘‘;
                for (var k in opinion) {
                    if (k == ‘评论关键字‘) {
                        if (opinion[k] !== ‘ ‘ && opinion[k] !== ‘/‘) {
                            reg = new RegExp(opinion[k], ‘ig‘);
                            replaceStr = `<span class="color-bg-green">${opinion[k]}</span>`;
                            $scope.mark.highlightContent = $scope.mark.highlightContent.replace(reg, replaceStr);
                        }
                    } else if (k == ‘评论小类‘) {
                        if (opinion[k] !== ‘ ‘ && opinion[k] !== ‘/‘) {
                            reg = new RegExp(opinion[k], ‘ig‘);
                            replaceStr = `<span class="color-bg-blue">${opinion[k]}</span>`;
                            $scope.mark.highlightContent = $scope.mark.highlightContent.replace(reg, replaceStr);
                        }
                    }
                }

                //滚动条移动到该词语
                var ele = document.getElementById(‘textarea2‘);
                var scrollHeight = ele.scrollHeight,
                    totalStrLength = ele.value.length,
                    currentStr = ele.value.toLowerCase().indexOf(opinion[‘评论关键字‘].toLowerCase()) == -1 ?
                     ele.value.toLowerCase().indexOf(opinion[‘评论小类‘].toLowerCase()) : 
                     ele.value.toLowerCase().indexOf(opinion[‘评论关键字‘].toLowerCase());
                $timeout(function () {
                    if (currentStr == -1) return; //说明原文中不包含评论关键字和评论小类
                    var eleCopy = document.getElementById(‘textarea2-copy‘);
                    eleCopy.scrollTop = (scrollHeight * currentStr / totalStrLength - 20 > 0) ? (scrollHeight * currentStr / totalStrLength - 20) : (currentStr / totalStrLength);
                }, 0);
                $scope.mark.showHighlight = true;
            },

 效果:

技术分享图片

 

浮动到表格中某一行,根据改行信息高亮某区域文字,并设置对应滚动高度,使高亮文字出现在当前视野

原文:http://www.cnblogs.com/XHappyness/p/7922032.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!