Javascriptでリストから入力したときに強調表示する単語

Question

リスト上にある場合は、テキストボックス内の単語をハイライト表示する方法を探しています（おそらくJavascriptの配列リスト）。

これはリアルタイムではありませんが、テキストボックスの単語をチェックするボタンは完全にうまく動作します。基本的に「Wordが（Word1、Word2など）の場合ここに変更を挿入をWordに挿入します。

私は変更を意味するようにすべての帽子を作成しても問題ありません。何でも簡単です。私はJavascriptを初めて使い、これを行う方法に関する非常に基本的な概念を理解しており、それをテキストボックスとやりとりする方法を学びたいと思っています。

Answer 1

<b>Word</b>太字にするか、スタイルによって強調することができます<em>Word</em> emタグの詳細についてはhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/emを参照してください。

Answer 2

gabesoftの答えのコメントで参照されているcontenteditableプロパティを処理する簡単なjavascriptの例です。単語のリストを定義し、テキストボックスを指定して、ハイライトを行うためにボタンを使用することができます。

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>"); 
    }); 
}