如何在不靜態時突出顯示鍵入的文本？

Question

我要去的例子。

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

我的第二個文本區域將被用戶輸入。我的目標是突出顯示第一個文本區域中的單詞，並將該單詞輸入到第二個文本區域中。我附上了一張照片，展示了我想要完成的事情。

例子：http://imgur.com/a/I27eO

我的代碼只需按下一個單詞列表到第一個文本區域和分離他們。我正在尋找如何突出所需單詞的幫助。

<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/