Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is a snippet that gives you the basics of what are looking for:</p> <pre><code>&lt;style&gt; .textarea { font-family:arial; font-size:12px; border:0; width:700px; height:200px; } .realTextarea { margin:0; background:transparent; position: absolute; z-index:999; } .overlayTextarea { margin:0; position:absolute; top:1; left:1; z-index:998; } .textareaBorder { border:groove 1px #ccc; position:relative; width:702px; height:202px; } .highlight { background: yellow; } &lt;/style&gt; &lt;script&gt; var _terms = ['January', 'February', 'March']; // YOUR SEARCH TERMS GO HERE // function preg_quote( str ) { return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\&lt;\&gt;\|\:])/g, "\\$1"); } function doit() { var s = myTextarea.value; for (i=0; i&lt;_terms.length; i++) s = s.replace( new RegExp( preg_quote( _terms[i] ), 'gi' ), '&lt;span class="highlight"&gt;' + _terms[i] + '&lt;/span&gt;' ); myOtherTextarea.innerHTML = s.replace( new RegExp( preg_quote( '\r' ), 'gi' ), '&lt;br&gt;' ); } &lt;/script&gt; &lt;div class="textarea textareaBorder"&gt; &lt;textarea id="myTextarea" onkeyup="doit();" class="textarea realTextarea"&gt;&lt;/textarea&gt; &lt;div id="myOtherTextarea" class="textarea overlayTextarea"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The basic concept is that the <code>&lt;textarea&gt;</code> (on top) is transparent and the <code>&lt;div&gt;</code> underneath contains the "rich / hightlighted" version. There is room for improvement when it comes to wrapping text but you get the idea. Happy Highlighting!</p> <p>Credit: The preg_quote function is from Kevin van Zonneveld <a href="http://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_phps_preg_quote/" rel="noreferrer">http://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_phps_preg_quote/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload