將文本輸入到兩個文本框中並標記相同的單詞

Question

我有兩個字段 - 一個類型爲「text」的input和一個textarea。

如果input包含單詞「狗」和textarea包含單詞「落水狗」，「狗」在textarea應標記爲紅色的div id爲「的rslt」。

我怎樣才能實現這與jQuery？

Answer 1

您可以使用indexOf來獲取當前單詞在字符串中的位置，然後在其中應用一些CSS。此代碼處理多個單詞突出顯示。

function markText(text, word, index) { 
 
     if (index != -1) { 
 
      var left = text.substr(0, index); 
 
      var current = word; 
 
      var right = text.substr(index + word.length); 
 
      var current = '<span style="background-color: red">' + current + '</span>'; 
 
      text = left + current + right; 
 
      if (right.indexOf(word) >= 0) { 
 
       text = markText(text, word, (left + current).length + right.indexOf(word)); 
 
      } 
 
     } 
 
     return text; 
 
    } 
 
    $('#btn').click(function() { 
 
     if (($('#txtarea').val() == "") || ($('#bx').val() == "")) { 
 
      $('#rslt').html('Please fill both boxes!'); 
 
      return; 
 
     } 
 
     var words = $('#bx').val().split(' '); 
 
     var text = $('#txtarea').val(); 
 

 
     words.forEach(function (word) { 
 
      if (text.indexOf(word) >= 0) { 
 
       text = markText(text, word, text.indexOf(word)); 
 
      } 
 
     }); 
 

 
     $("#rslt").html(text); //WHAT HERE? 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Write here:</p> 
 
<input type="text" id="bx"/><br/> 
 
<p>and here:</p> 
 
<textarea cols="100" rows="8" id="txtarea"></textarea><br/> 
 
<button id="btn">GO</button> 
 
<hr/> 
 
<div id="rslt"></div>

Answer 2

你可以找到同樣的話用search()，或indexOf()
查看這裏：indexOf() - MDN，search() - MDN ...

但是你要製造假textarea的設置方式（重複的字的顏色） - 這裏查看Format text in a <textarea>?

如果你是好奇檢查mergely：http://www.mergely.com/editor - 沒有任何文字區域...