码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-11-29 19:51:59      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:.sh   分享   tco   bsp   new   show   分享图片   信息   滚动   

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

            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;
            },

 效果:

技术分享图片

 

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

标签:.sh   分享   tco   bsp   new   show   分享图片   信息   滚动   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!