如何从输入字段到文本区域搜索文本，以及如何使用Jquery标记匹配的结果？

问题描述

我正在尝试创建简单的jquery App，但是遇到一个小问题，我无法解决，我想在textarea框形式输入字段中进行搜索，如果输入形式值将与textarea值匹配，我想标记匹配的文字，下面的图片显示了我想做什么，有什么建议吗？

$('#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>

解决方法

我能想到的最简单的方法是在文本区域后面放置一个透明元素 并在其中添加结果：

对此进行编程的主要功能：

• 元素必须呈现相同的形状（大小，字体，线条等。）
• 文本区域必须具有透明背景。
• 每当更改文本区域（调整大小）时，我们都需要匹配结果容器的大小。

这是我的实现方式

$(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' />