Markieren Sie Wörter, wenn Sie aus einer Liste mit Javascript

Question

eingeben Ich suche nach einer Möglichkeit, Wörter in einem Textfeld hervorzuheben (oder eine andere Möglichkeit, das Wort bemerkbar zu machen), wenn sie auf einer Liste sind (wahrscheinlich eine Array-Liste mit Javascript).

Ich erwarte nicht, dass dies in Echtzeit ist, eine Schaltfläche, die die Wörter in der Textbox überprüft, wird einwandfrei funktionieren. Grundsätzlich ein "Wenn Wort ist (Word1, Word2, etc.) dann Fügen Sie hier in Word einfügen."

Ich bin auch damit einverstanden, nur das Wort Großbuchstaben zu machen, um Veränderung zu bedeuten. Was auch immer ist einfach. Ich bin neu in Javascript und verstehe nur das grundlegende Konzept dafür und möchte lernen, wie man es mit einer Textbox interagieren lässt.

Answer 1

Sie könnten es fett machen <b>Word</b> oder betonen Sie nach einem Stil mit <em>Word</em> Sehen Sie diese https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em für weitere Informationen über die EM-Tag.

Answer 2

Hier ist ein schnelles Javascript-Beispiel, das von der in den Kommentaren der Antwort von gabesoft referenzierten contenteditable-Eigenschaft abarbeitet. Sie können eine Liste von Wörtern definieren, das Textfeld angeben und dann eine Schaltfläche verwenden, um die Hervorhebungen auszuführen.

JSFiddle Example

HTML:

<p contenteditable="true">This is a test of the word highlight system.</p> 
<button onClick="highlightWords()">highlight</button> 

JS:

//define words you want highlighted 
var arr = ['test', 'system']; 

//locate the element on the page to do the word operations 
//this will find the first <p> tag 
var textbox = document.getElementsByTagName('p')[0]; 

var highlightWords = function() { 
    //foreach word, perform highlighting actions 
    arr.forEach(function(word) { 

    //build regular expression to match against each variable (word) in our list 
    var regex = new RegExp("(" + word + ")", "gi"); 
    //g = can find multiple instances (global) 
    //i = case insenstive 

    //replace predefined textbox HTML with 'highlighted' version 
    //the regex will find matching words and wrap them in <strong> tags 
    //the $1 represents the matched word 
    textbox.innerHTML = textbox.innerHTML.replace(regex, "<strong>$1</strong>"); 
    }); 
}