突出显示textarea angular 8中的特定单词

Posted 2023-05-07

【中文标题】突出显示textarea angular 8中的特定单词

【英文标题】：Highlight specific words in textarea angular 8

【发布时间】：2021-06-28 03:42:00

【问题描述】：

我正在尝试从 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”、“古典”、“文学”。

我们将不胜感激。

【问题讨论】：

codersblock.com/blog/highlight-text-inside-a-textarea

一种方法是用' word-to-be-higlighted'替换所有要突出显示的单词，基本上用跨越。但请务必牢记脚本攻击。

【参考方案1】：

此答案基于@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>

See Working Demo Here

【参考方案2】：

你可以试试这个。

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>