突出显示 textarea angular 8 中的特定单词 [英] Highlight specific words in textarea angular 8
本文介绍了突出显示 textarea angular 8 中的特定单词的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试从 textarea 中选择几个单词并创建引导芯片.
我能够为选定的单词创建筹码.我试图用不同的背景颜色突出显示选定的单词.
导出类 SearchComponent 实现 OnInit {构造函数(){}selectedText = [];regexFromMyArray: 正则表达式；//tslint:disable-next-line:typedefshowSelectedText() {让文字 = '';如果(window.getSelection){text = window.getSelection().toString();如果(文本){//console.log(this.selectedText.includes(text));if (this.selectedText.includes(text) === false){this.selectedText.push(text);this.regexFromMyArray = new RegExp(this.selectedText.join('|'), 'ig');console.log(this.regexFromMyArray);}}}//console.log(this.selectedText);返回 this.selectedText;}//tslint:disable-next-line:typedef删除项目(数组，项目){for (const i in array){如果(数组 [i] === 项目){array.splice(i, 1);休息;}}}//tslint:disable-next-line:typedef删除芯片(el){//el.style.display = 'none';document.getElementById(el).style.display = 'none';this.removeItem(this.selectedText, el);}ngOnInit(): 无效 {}}我不确定如何突出显示 selectedText 数组中的单词.我想突出显示所有芯片字.像相反"、Ipsum"、古典"、文学".
将不胜感激.
解决方案
此答案基于@RobinDijkhof 在评论中提供的链接.
我们将完全按照所提供的设置 css
*,*::前，*::后 {box-sizing: 边框框；}.容器，.背景，文本区域{宽度:460px；高度:180px；}.强调，文本区域{填充:10px；字体:20px/28pxOpen Sans"，无衬线；字母间距:1px；}.容器 {显示:块；边距:0 自动；变换:translateZ(0);-webkit-text-size-adjust: 无；}.backdrop {位置:绝对；z-索引:1；边框:2px 实心 #685972；背景色:#fff;溢出:自动；指针事件:无；转换:转换1s；}.强调 {空白:预包装；自动换行:断字；颜色:透明；}文本区域{显示:块；位置:绝对；z-索引:2；边距:0；边框:2px 实心 #74637f;边界半径:0；颜色:#444；背景色:透明；溢出:自动；调整大小:无；转换:转换1s；}标记 {边框半径:3px；颜色:透明；背景颜色:#b1d5e5；}.透视文本区域{变换:透视(1500px)translateX(155px)rotateY(45deg)比例(1.1)；}文本区域:焦点，按钮:焦点{大纲:无；框阴影:0 0 0 2px #c6aada;}现在的任务是将 JQuery 代码转换为 Angular.我们将构建一个可以像
一样使用的组件<app-textarea-highlight [(ngModel)]='txt'[highlightTexts]='highlightTexts'></app-textarea-highlight>值在哪里
highlightTexts = [text", demo", div"];txt = "此演示展示了如何突出显示文本区域中的文本位.好吧，那是谎言.您实际上无法在 textarea 内呈现标记.但是，您可以通过在 textarea 后面小心放置一个 div 并在那里添加高亮标记来伪造它.}为了使用属性绑定，我们将实现 ControlValueAccessor
下面是代码
@Component({选择器:app-textarea-highlight"，templateUrl: "./textarea-highlight.component.html",styleUrls: [./textarea-highlight.component.css"],供应商: [{提供:NG_VALUE_ACCESSOR，useExisting: forwardRef(() => TextareaHighlightComponent),多:真}]})导出类 TextareaHighlightComponent实现 ControlValueAccessor {构造函数(){}@Input() highlightTexts: string[] = [];@ViewChild("backdrop") $backdrop: ElementRef;@ViewChild("textarea") $textarea: ElementRef;文本值:字符串="；得到高亮文本(){返回 this.applyHighlights(this.textValue)}应用亮点(文本){文字 = 文字?文本.replace(/\n$/g, "\n\n") : '';this.highlightTexts.forEach(x => {文字 = 文字.replace(new RegExp(x, 'g'), "<mark>$&</mark>");})返回文本；}句柄滚动(){var scrollTop = this.$textarea.nativeElement.scrollTop;this.$backdrop.nativeElement.scrollTop = scrollTop;var scrollLeft = this.$textarea.nativeElement.scrollLeft;this.$backdrop.nativeElement.scrollLeft = scrollLeft;}onChanges: ($value: any) =>空白;onTouched: () =>空白;writeValue(value: any): void {如果(值！== 未定义){this.textValue = 值；}}registerOnChange(fn: any): void {this.onChanges = fn;}registerOnTouched(fn: any): void {this.onTouched = fn;}} 最后一步是设置html
<div #backdrop class="backdrop"><div class="highlights";[innerHTML]=highlightedText"></div><文本区域[(ngModel)]=textValue"(scroll)="handleScroll()";#textarea></textarea>
I am trying to select a few words from the textarea and create bootstrap chips.
I am able to create the chips for selected words. I am trying to highlight the selected words with different background colors.
export class SearchComponent implements OnInit {
constructor() { }
selectedText = [];
regexFromMyArray: RegExp;
// tslint:disable-next-line:typedef
showSelectedText() {
let text = '';
if (window.getSelection) {
text = window.getSelection().toString();
if (text) {
// console.log(this.selectedText.includes(text));
if (this.selectedText.includes(text) === false)
{
this.selectedText.push(text);
this.regexFromMyArray = new RegExp(this.selectedText.join('|'), 'ig');
console.log(this.regexFromMyArray);
}
}
}
// console.log(this.selectedText);
return this.selectedText;
}
// tslint:disable-next-line:typedef
removeItem(array, item){
for (const i in array){
if (array[i] === item){
array.splice(i, 1);
break;
}
}
}
// tslint:disable-next-line:typedef
deleteChip(el) {
// el.style.display = 'none';
document.getElementById(el).style.display = 'none';
this.removeItem(this.selectedText, el);
}
ngOnInit(): void {
}
}
I am not sure how to highlight the words in the selectedText array. I want to highlight all chip words. Like "Contrary", "Ipsum", "classical", "literature".
Help will be appreciated.
解决方案
This answer is based on the link provided by @RobinDijkhof in there comment.
We will set up the css exactly as provided
*,
*::before,
*::after {
box-sizing: border-box;
}
.container,
.backdrop,
textarea {
width: 460px;
height: 180px;
}
.highlights,
textarea {
padding: 10px;
font: 20px/28px "Open Sans", sans-serif;
letter-spacing: 1px;
}
.container {
display: block;
margin: 0 auto;
transform: translateZ(0);
-webkit-text-size-adjust: none;
}
.backdrop {
position: absolute;
z-index: 1;
border: 2px solid #685972;
background-color: #fff;
overflow: auto;
pointer-events: none;
transition: transform 1s;
}
.highlights {
white-space: pre-wrap;
word-wrap: break-word;
color: transparent;
}
textarea {
display: block;
position: absolute;
z-index: 2;
margin: 0;
border: 2px solid #74637f;
border-radius: 0;
color: #444;
background-color: transparent;
overflow: auto;
resize: none;
transition: transform 1s;
}
mark {
border-radius: 3px;
color: transparent;
background-color: #b1d5e5;
}
.perspective textarea {
transform: perspective(1500px) translateX(155px) rotateY(45deg) scale(1.1);
}
textarea:focus,
button:focus {
outline: none;
box-shadow: 0 0 0 2px #c6aada;
}
Now to the task will be to convert the JQuery code to Angular. We will build a component that can be used like
<app-textarea-highlight [(ngModel)]='txt'
[highlightTexts]='highlightTexts'
></app-textarea-highlight>
Where the values are
highlightTexts = ["text", "demo", "div"];
txt = "This demo shows how to highlight bits of text within a textarea. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there.
}
To enable using property binding we will implement ControlValueAccessor
Below is the code
@Component({
selector: "app-textarea-highlight",
templateUrl: "./textarea-highlight.component.html",
styleUrls: ["./textarea-highlight.component.css"],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TextareaHighlightComponent),
multi: true
}
]
})
export class TextareaHighlightComponent
implements ControlValueAccessor {
constructor() {}
@Input() highlightTexts: string[] = [];
@ViewChild("backdrop") $backdrop: ElementRef<HTMLDivElement>;
@ViewChild("textarea") $textarea: ElementRef<HTMLTextAreaElement>;
textValue: string = "";
get highlightedText () {
return this.applyHighlights(this.textValue)
}
applyHighlights(text) {
text = text ? text
.replace(/\n$/g, "\n\n") : '';
this.highlightTexts.forEach(x => {
text = text
.replace(new RegExp(x, 'g'), "<mark>$&</mark>");
})
return text;
}
handleScroll() {
var scrollTop = this.$textarea.nativeElement.scrollTop;
this.$backdrop.nativeElement.scrollTop = scrollTop;
var scrollLeft = this.$textarea.nativeElement.scrollLeft;
this.$backdrop.nativeElement.scrollLeft = scrollLeft;
}
onChanges: ($value: any) => void;
onTouched: () => void;
writeValue(value: any): void {
if (value !== undefined) {
this.textValue = value;
}
}
registerOnChange(fn: any): void {
this.onChanges = fn;
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
}
The final step is to set the html
<div class="container">
<div #backdrop class="backdrop">
<div class="highlights" [innerHTML]="highlightedText"></div>
</div>
<textarea
[(ngModel)]="textValue"
(scroll)="handleScroll()"
#textarea
></textarea>
</div>
这篇关于突出显示 textarea angular 8 中的特定单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
