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

Question

我正在尝试创建简单的 jquery 应用程序，但我运行遇到了我无法解决的小问题，我想在 textarea 框表单输入字段中搜索，如果输入表单value 将匹配 textarea 值，我想标记匹配的文本，下图显示了我想做的事情，有什么建议吗？

$('#search').on('input', function(e) {
  e.preventDefault();
  var searchTxtBox = $('#search');
  searchTxtBox.val(searchTxtBox.val().replace(/(\s+)/, "(<[^> ]+>)*(<[^> ]+>)*"));
  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></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>

Answer 1

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

编程的主要特点：

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

这是我的实现：

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

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

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

html

jquery

textarea

input