如何在不静态时突出显示键入的文本？

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/