突出显示文本区域中的特定单词 angular 8
Highlight specific words in textarea angular 8
我正在尝试 select 来自文本区域的几个词并创建 bootstrap 个筹码。
我能够为 selected 单词创建筹码。我试图用不同的背景颜色突出显示 selected 单词。
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”,“古典”,“文学”。
我们将不胜感激。
你可以试试这个。
HTML
<span class="highlightText">Your text</span>
CSS
.highlightText {
background: yellow;
}
另一个提示
任何 CSS 文本相关 属性 都会影响 textarea/input 内的整个文本。您需要一个可编辑的元素或文档来实现语法高亮显示。示例(适用于所有最新的浏览器;最后一个不支持 contenteditable 的主要浏览器是 Firefox 2.0):
<code contenteditable="true">
<span style="color: blue">var</span> foo = <span style="color: green">"bar"</span>;
</code>
此答案基于@RobinDijkhof 在评论中提供的link。
我们将完全按照提供的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>
我正在尝试 select 来自文本区域的几个词并创建 bootstrap 个筹码。
我能够为 selected 单词创建筹码。我试图用不同的背景颜色突出显示 selected 单词。
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”,“古典”,“文学”。
我们将不胜感激。
你可以试试这个。
HTML
<span class="highlightText">Your text</span>
CSS
.highlightText {
background: yellow;
}
另一个提示 任何 CSS 文本相关 属性 都会影响 textarea/input 内的整个文本。您需要一个可编辑的元素或文档来实现语法高亮显示。示例(适用于所有最新的浏览器;最后一个不支持 contenteditable 的主要浏览器是 Firefox 2.0):
<code contenteditable="true">
<span style="color: blue">var</span> foo = <span style="color: green">"bar"</span>;
</code>
此答案基于@RobinDijkhof 在评论中提供的link。
我们将完全按照提供的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>