效果:

思路: 让一个div浮动在textarea上,样式和位置保持完全一致,textarea负责输入,div负责高亮显示

代码:

.vue

<template>
<div class="highlight-contain">
<!-- 本组件是带高亮的textarea,需要接受高亮关键词数组来进行高亮 -->
<div id="highlight-area" class="input-font el-textarea" >
<div id="fake-textarea" class="el-textarea__inner" v-html="highlightHtml"></div>
</div>
<div id="input-area">
<el-input
class="input-font"
id="input-textarea"
type="textarea"
:placeholder="placeholder"
:autosize="autosize"
v-model="strValue"
@input="getHighlightHtml"
@mousemove.native="setHighlightArea('height',true)"
></el-input>
</div>
</div>
</template> <style lang="postcss">
/* 这里是为了让textarea中的文字隐藏,同时这只光标和placeholder颜色 */
#input-area .el-textarea .el-textarea__inner {
color: #606266; /* 光标的颜色*/
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0); /* 文本颜色 */
-webkit-text-fill-color: transparent;
&::-webkit-input-placeholder {
color: #dcdfe6; /* 改变placeholder文本颜色 */
text-shadow: none;
-webkit-text-fill-color: initial;
}
} .highlight-contain {
position: relative;
& #highlight-area {
/* 自定义样式 */
position: absolute;
left: 0px;
top: 0px;
pointer-events: none;
& #fake-textarea {
/* color: #ec140d; */
pointer-events: none;
border: none;
resize: none;
background-color: rgba(0, 0, 0, 0);
line-height: 1.5 !important;
max-height: 590px;
overflow-y: auto;
/* 和html中的类一样,都是为了设定和textarea一模一样的样式,防止文字对接不上(这里是复制的浏览器中textarea元素属性) */
-webkit-appearance: textarea;
-webkit-rtl-ordering: logical;
-webkit-writing-mode: horizontal-tb !important;
flex-direction: column;
white-space: pre-wrap;
word-wrap: break-word;
text-rendering: auto;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-align: start;
margin: 0em;
font: 400 14px Arial;
}
}
} /* 高亮色 */
.highlight-11 {
color: #fb4546;
}
.highlight-10 {
color: #0fed40;
}
.highlight-9 {
color: #feb71d;
}
.highlight-8 {
color: #39afea;
}
.highlight-7 {
color: #e512bf;
}
.highlight-6 {
color: #0f29ed;
}
.highlight-5 {
color: #f088c1;
}
.highlight-4 {
color: #acbb09;
}
.highlight-3 {
color: #7a152e;
}
.highlight-2 {
color: #7ca51c;
}
.highlight-1 {
color: #5e36aa;
}
.highlight-bracket {
color: #000000;
}
</style> <script lang="ts" src="./highlightTextarea.ts"></script>

.ts

import { Vue, Component, Prop } from "vue-property-decorator"
import $ from 'jquery'
@Component({}) export default class HighlightTextarea extends Vue {
/* ---- 从父元素接受参数 ---- */
@Prop()
value: string
@Prop()
placeholder: string
@Prop()
autosize: { minRows: number, maxRows: number }
@Prop()
highlightKey: string[] //要高亮的词 /* ---- 变量 ---- */
get strValue() {
return this.value ? this.value : ''
}
set strValue(val) {
this.$emit('input', val)
}
highlightHtml: string = ''; /* ---- 函数 ---- */
setHighlightArea(type: string, right?: boolean) {
if (type === 'height') {
if (right) {
let height = document.getElementById('input-textarea').style.height;
document.getElementById('fake-textarea').style.height = height;
} else {
window.setTimeout(() => {
let height = document.getElementById('input-textarea').style.height;
document.getElementById('fake-textarea').style.height = height;
}, 100);
}
} else if (type === 'scrollTop') {
if (right) {
let scroll = document.getElementById('input-textarea').scrollTop
document.getElementById('fake-textarea').scrollTop = scroll;
} else {
window.setTimeout(() => {
let scroll = document.getElementById('input-textarea').scrollTop
document.getElementById('fake-textarea').scrollTop = scroll;
}, 100);
}
}
} getHighlightHtml(val) {
if (val.split('\n').length > this.autosize.maxRows) { //超过最大行textarea有滚动时,为解决div底部不能和textarea重合,故加一个<br/>,并延时设置scrolltop
this.highlightHtml = this.highlightStr(val, this.highlightKey) + '<br/>';
this.setHighlightArea('scrollTop', false);
} else {
this.highlightHtml = this.highlightStr(val, this.highlightKey)
}
// 高亮区和输入区高度保持一致
this.setHighlightArea('height');
}
/**
* 高亮方法:
* 1.将oriStr中的高亮关键字使用“{{{关键字}}}”替换,这里防止关键词数组中有包含关系,所有用空格区分oriStr
* 2. 然后再循环highlightKey用<span class="..."></span>替换文中的{{{和}}}
* @param oriStr 要高亮的字符串
* @param highlightKey 高亮关键词
*/
highlightStr(oriStr: string, highlightKey: string[]): string {
if (!oriStr || !highlightKey || highlightKey.length === 0)
return oriStr;
let strConvert = (s: string, key: string): string => {
let rowArr = s.split('\n'); //按行进行处理
for (let i = 0; i < rowArr.length; i++) {
let strArr = rowArr[i].split(' ').filter(item => item !== '');
strArr = strArr.map(item => {
if (item === key) {
item = `{{{${item}}}}`
}
return item;
})
rowArr[i] = strArr.join(' ')
}
return rowArr.join('\n');
}
let rebuild = highlightKey.reduce(strConvert, oriStr);
let regExp;
let regStr;
for (let i = 0; i < highlightKey.length; i++) {
regStr = '\\{\\{\\{' + this.escapeString(highlightKey[i]);
regExp = new RegExp(regStr, 'g');
if (highlightKey[i] === '(' || highlightKey[i] === ')') { //小括号颜色
rebuild = rebuild.replace(regExp, `<span class="highlight-bracket">${highlightKey[i]}</span>`)
} else {
rebuild = rebuild.replace(regExp, `<span class="highlight-${i + 1}">${highlightKey[i]}`)
}
}
rebuild = rebuild.replace(/\}\}\}/g, '</span>');
return rebuild;
}
//处理字符串中可能对正则有影响的字符串
escapeString(value: string): string {
var str = value.replace(new RegExp('\\\\', 'g'), '\\\\');
var characterss = ['(', ')', '[', ']', '{', '}', '^', '$', '|', '?', '*', '+', '.'];
characterss.forEach(function (characters) {
var r = new RegExp('\\' + characters, 'g')
str = str.replace(r, '\\' + characters)
})
return str;
} /* ---- 生命周期 ---- */
mounted() {
this.highlightKey.sort((a, b) => b.length - a.length);// 为了使高亮正常,关键词长的排在前面
$('#input-textarea').scroll((e) => {
this.setHighlightArea('scrollTop', true);
});
}
}

使用:import HighlightTextarea from "..."引入后,

  <highlight-textarea
:highlightKey="['=', '<', '>', '!=', '<=', '>=', 'like', '(', ')']"
placeholder="请输入监测"
:autosize="{minRows: 4, maxRows: 10}"
v-model="str">
</highlight-textarea>

textarea怎么解析html代码,从而实现一个可高亮的输入框的更多相关文章

  1. 一步步教你为网站开发Android客户端---HttpWatch抓包,HttpClient模拟POST请求,Jsoup解析HTML代码,动态更新ListView

    本文面向Android初级开发者,有一定的Java和Android知识即可. 文章覆盖知识点:HttpWatch抓包,HttpClient模拟POST请求,Jsoup解析HTML代码,动态更新List ...

  2. 分析和解析PHP代码的7大工具

    PHP已成为时下最热门的编程语言之一,然而却有许多PHP程序员苦恼找不到合适的工具来帮助自己分析和解析PHP代码.今天小编就为大家介绍几个非常不错的工具,来帮助程序员们提高自己的工作效率,一起来看看吧 ...

  3. Android JSON 解析关键代码

    Android Json 解析其实还是蛮重要的知识点,为什么这么说呢,因为安卓通信大部分的协议都是使用 json 的方式传输,我知道以前大部分是使用的 xml ,但是时代在发展社会在进步,json 成 ...

  4. 使用python解析C代码

    我有一个巨大的C文件(~100k行),我需要能够解析.主要是我需要能够从其定义中获取有关每个结构的各个字段的详细信息(如结构中每个字段的字段名称和类型).是否有一个好的(开源,我可以在我的代码中使用) ...

  5. tensorflow+inceptionv3图像分类网络结构的解析与代码实现

    tensorflow+inceptionv3图像分类网络结构的解析与代码实现 论文链接:论文地址 ResNet传送门:Resnet-cifar10 DenseNet传送门:DenseNet SegNe ...

  6. 用phpQuery像jquery一样解析html代码

    简介 如何在php中方便地解析html代码,估计是每个phper都会遇到的问题.用phpQuery就可以让php处理html代码像jQuery一样方便. 项目地址:https://code.googl ...

  7. javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数

    javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...

  8. express4.0之后不会解析req.files,必须加一个插件multer

    express 4 + 用multer express4.0之后不会解析req.files,必须加一个插件multer http://www.w3school.com.cn/tags/att_form ...

  9. 双缓冲绘图和窗口控件的绘制——ATL ActiveX 窗口控件生成向导绘制代码OnDraw的一个错误 .

    双缓冲绘图和窗口控件的绘制 ---ATL ActiveX 窗口控件生成向导绘制代码OnDraw的一个错误 cheungmine 我们通常使用ATL COM组件,生成一个带窗口的ActiveX控件,然后 ...

随机推荐

  1. inotify和epoll

    参考EventHub.cpp 1.初始化inotify int mINotifyFd = inotify_init(); 2.将要监测的目录添加到inotify int result = inotif ...

  2. java 用接口实现加减乘除计算器

    class Test{ public static void main(String[] args) { fun i=new fun(); jiafa s1=new jiafa(); jianfa s ...

  3. linux 下的torrent下载器qBitTorrent

    BT下载利器--Qbittorrent完全攻 Ubuntu使用命令安装qBittorrent的方法 源码下载

  4. 数据库操作-go

    原版 import ( "database/sql" _ "github.com/go-sql-driver/mysql" "fmt" ) ...

  5. mysql自动提交

    MySQL的autocommit(自动提交)默认是开启,其对mysql的性能有一定影响,举个例子来说,如果你插入了1000条数据,mysql会commit1000次的,如果我们把autocommit关 ...

  6. jxls-1.x导出excel入门——基本操作

    请注意,一下内容均基于1.x版本,2.x版本将另开随笔记录 一.概述  JXLS是基于Jakarta POI API的Excel报表生成工具,可以生成精美的Excel格式报表.它采用标签的方式,类似J ...

  7. TCP/IP漫游

    TCP/IP漫游 TCP/IP是互联网的基础协议栈,它包括大大小小几十个协议.本篇文章主要涉及到就是HTTP.TCP.IP协议.我们经常学的网络模型是七层或者五层,实际上一般认为一共只有四层就可以了. ...

  8. 抽样分布(3) F分布

    定义 设U~χ2(n1), V~χ2(n2),且U,V相互独立,则称随机变量 服从自由度为(n1,n2)的F分布,记为F~F(n1,n2),其中n1叫做第一自由度,n2叫做第二自由度. F分布的概率密 ...

  9. vim分屏功能总结

    vim的分屏功能 总结起来,基本都是ctrl+w然后加上某一个按键字母,触发一个功能.(1)在shell里打开几个文件并且分屏: vim -On file1 file2 ... vim -on fil ...

  10. Unity AssetBundle工作流

    一.创建AssetBundle 1.在资源的Inspector视图下有一个AssetBundle的UI,第一个选项表示AssetBundle名称,第二个用于设置AssetBundle Variant, ...