javascript - 突出显示textarea angular 8中的特定单词
问题描述
我正在尝试从 textarea 中选择几个单词并创建引导芯片。
我能够为选定的单词创建芯片。我正在尝试用不同的背景颜色突出显示选定的单词。
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 {
}
}
我不确定如何突出显示selectedText
数组中的单词。我想突出显示所有芯片单词。像“相反”、“Ipsum”、“古典”、“文学”。
帮助将不胜感激。
解决方案
该答案基于@RobinDijkhof 在评论中提供的链接。
我们将完全按照提供的方式设置 css
*,
*::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;
}
现在的任务是将 JQuery 代码转换为 Angular。我们将构建一个可以像这样使用的组件
<app-textarea-highlight [(ngModel)]='txt'
[highlightTexts]='highlightTexts'
></app-textarea-highlight>
值在哪里
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.
}
为了启用使用属性绑定,我们将实现ControlValueAccessor
下面是代码
@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;
}
}
最后一步是设置html
<div class="container">
<div #backdrop class="backdrop">
<div class="highlights" [innerHTML]="highlightedText"></div>
</div>
<textarea
[(ngModel)]="textValue"
(scroll)="handleScroll()"
#textarea
></textarea>
</div>
推荐阅读
- pandas - python panda中引用类型列表的排序问题
- if-statement - 如何将列表的元组与值进行比较?
- php - 在没有 ON CASCADE 的情况下准备多行 PHP 代码中的语句
- java - 可以帮我在java中执行sql
- docker - Ping 不会安装在 Docker 容器中
- django - DjangoRestFramework,我想要名称而不是 ID,
- c++ - 具有模板参数和 crtp 的类,仅按类名调用构造函数
- javascript - 像 SQL 一样使用 IndexedDB。使用不在范围内的多个索引值进行查询
- javascript - 通过在 URL 末尾附加一个变量来设置加载时的默认主题
- r - R: 为什么使用 download.file() 下载的 PNG 文件无法打开?