How to Search text from input field to textarea, and How to marked matched result Using Jquery?

user_13362831 0
Viewed 387

I am trying to create simple jquery App, but i ran over small problem, which i can't solve, I want to search in textarea box form input field, if input form value will match textarea value, i want to marked matched text, picture below shows what i want to done, any suggestion?enter image description here

$('#search').on('input', function(e) {
  e.preventDefault();
  var searchTxtBox = $('#search');
  searchTxtBox.val(searchTxtBox.val().replace(/(\s+)/, "(<[^> ]+>)*$1(<[^> ]+>)*"));
  var textarea = $('#editor');
  var enew = '';
  if (searchTxtBox.val() != '') {

    enew = textarea.html().replace(/(<mark>|<\/mark> )/igm, "");
    textarea.html(enew);

    var query = new RegExp("(" + searchTxtBox.val() + ")", "gim");
    newtext = textarea.html().replace(query, "<mark>$1</mark>");
    newtext = newtext.replace(/(<mark>[^<>]*)((<[^> ]+>)+)([^<>]*<\/mark>)/, "</mark><mark>");

    textarea.html(newtext);

  } else {
    enew = textarea.html().replace(/(<mark>|<\/mark> )/igm, " ");
    textarea.html(enew);
  }
});
mark {
  background-color: red;
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input placeholder='search' id='search'>
<div id="editor" rows="4" cols="50">
</div>

textarea input html jquery
1 Answers

The simplest way I can think of is positioning a transparent element behind the textarea and adding the results there:

Key features to program this:

  • The elements must render the same (size, font, line ect..)
  • The textarea must have a transparent background.
  • Whenever the textarea is changed (resized) we need to match the size of the result container.

Here is my implementation:

$(function(){
        //Simple helper function to match the size of the elements:
        function matchSize($base, $target) {
            $target.css({
            width :  $base.outerWidth(), 
          height :  $base.outerHeight()
        });
    }
    //Attach whenever serach field changed run the query:
        $("#search").keyup(function(){
            let $search = $(this),
                    $input = $('#input');
        let $result = $input.prev('code');
        //Match size:
        matchSize($input, $result)
        //Search
        let marked = $input.val().replace(
            new RegExp("(" + $search.val().trim() + ")", "g"), 
          "<mark>$1</mark>"
        );
        //Set marked transparent text:
        $result.html(marked);
    });
    //textarea can be resized so always match the size:
    $('#input').bind('mouseup', function(){ 
            let $input = $('#input');
        let $result = $input.prev('code');
        matchSize($input, $result)
    });
});
.wrap {
  position: relative;
  display:block;
}
/* match the two */
.wrap code,
.wrap textarea {
    position:absolute;
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-align: start;
    appearance: textarea;
    flex-direction: column;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    margin: 0em;
    font: 400 13.3333px Arial;
    border-width: 1px;
    border-style: solid;
    padding: 2px;
    background-color:transparent;
    z-index: 2;
    box-sizing: border-box;
}
.wrap code {
    z-index: 1;
    top:0;
    left:0;
    border-color:transparent;
    color:transparent;
    background-color: white;
}
.wrap code mark {
  color: transparent;
  background-color: yellow;
  padding:0;
  margin:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <code></code>
  <textarea id="input">the easiest way to do this and the quickest.</textarea>
</div>
<br/><br/><br/><br/>
Search: <input id="search" placeholder='Search' />

user_14864860
Related