當輸入的文本不是靜態的時，如何突出顯示？

Question

我要做什么的示例。

我有兩個Textareas。 一個擁有一個單詞列表，每行一個，這個列表每次都不相同。

我的第二個文本區域將用於用戶輸入。 我的目標是在第一個文本區域中鍵入第二個文本區域時突出顯示該詞。 我隨附了一個示例照片，顯示了我希望完成的工作。

示例： http ： //imgur.com/a/I27eO

我的代碼只是將單詞列表推入第一個Text區域並將它們分開。 我正在尋找有關如何突出顯示所需單詞的幫助。

<textarea class="col-md-3" id="inputArray1" rows="20" cols="10" placeholder="Input1"></textarea>
<textarea class="col-md-3" id="inputArray2" rows="20" cols="10" placeholder="Input2"></textarea>

//holding input values for text area
var InputVar = document.getElementById("inputArray1").value;
var InputVar2 = document.getElementById("inputArray2").value;

//holding output values for text area
var OutputVar = document.getElementById("outputArray1");
var OutputVar2 = document.getElementById("outputArray2");

// takes string and breaks into substring array of words
var SplitString = InputVar.split(/[\s]+/g);

//displays list of words in 2nd text area
OutputVar.value = SplitString;

Answer 1

由於您已標記jQuery，因此這是一個基本功能，可檢查是否有任何用戶單詞與列出的單詞相匹配：

 $("#userArray").on('change keyup paste', function() { var input = $(this).val().split("\\n"); $('#listArray span').each(function() { $(this).removeClass('active'); if ($.inArray($(this).text(), input) != -1) { $(this).addClass('active'); } }); }); 

 #list_input > div { border:4px solid; padding: 1em; margin: 1em auto; } #listArray { overflow: auto; } #listArray span { display: block; float: left; clear: left; padding:4px; margin:1px; } #listArray span.active { background: yellow; } #userArray { width: 100%; height: 150px; border: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container" id="list_input"> <div id="listArray"> <span>Lorem</span> <span>Eos</span> <span>Earum</span> <span>Tempora</span> <span>Recusandae</span> </div> <div> <textarea id="userArray" placeholder="enter words..."></textarea> </div> </div> 

jsFiddle： https ://jsfiddle.net/azizn/3x3ga3tL/

---

編輯：您可以使用以下腳本從JS數組動態附加單詞列表：

var words = ["Test1", "Test2", "Test3","Test4"];
for (var i = 0; i < words.length; i++) {
    $('#listArray').append("<span>" + words[i] + "</span>");
}

jsFiddle： https ://jsfiddle.net/azizn/3x3ga3tL/6/