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

Posted 2023-05-07

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

【英文标题】：How to Search text from input field to textarea, and How to marked matched result Using Jquery?

【发布时间】：2021-01-13 02:22:59

【问题描述】：

我正在尝试创建简单的 jquery 应用程序，但我遇到了我无法解决的小问题，我想在 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>

【问题讨论】：

请举例说明输入和预期输出

我在我的问题中添加了预期的 img :)

textareas 不允许在单个字符串上使用 css。你需要一个可内容编辑的 div 或类似 tinymce 的东西

【参考方案1】：

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

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

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

这是我的实现：

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