jquery 试图显示已删除搜索字符的输入文本

k7fdbhmy  于 2023-04-20  发布在  jQuery
关注(0)|答案(1)|浏览(80)

我试图从文本区域中删除搜索字符,然后重新显示没有搜索字符的新文本。我已经做了所有我能做的,但它所做的只是删除搜索字符,而不是重新显示没有字符的文本。
我尝试用空格替换单词中的搜索字符,但没有任何效果。

$(document).ready(function() {
  //On click of button, generate text in text area
  $('#generateText').click(function(event) {
    var text = $('#textArea').val("Tom Cruise once ate a 4000ft long subway sandwichs and then he played Nathan Drake!")
  })
  $('#submit').click(function() {
    event.preventDefault();

    //Number of Words
    var text = $('#textArea').val();
    var numWords = text.trim().split(/\s+/).length;
    $('#numWords').val(numWords);

    //Occurance Number
    var searchChar = $('#searchChar').val();
    var numOccurance = (text.match(new RegExp(searchChar, "gi")) || []).length;
    $('#numOccurance').val(numOccurance);

    $('#numOccurance').val(numOccurance);

    //Caps Text
    var text = $('#textArea').val();
    var uppercaseText = text.toUpperCase();
    $('#capsText').val(uppercaseText);

    //Removes Search Character
    var removedCharText = text.replaceAll(searchChar, '');
    $('#removeChar').val(removedCharText);

    $('#removeChar').val(searchChar);
    // Date
    var numDays = $('#numDays').val();
    var currentDate = new Date;
    currentDate.setDate(currentDate.getDate() + parseInt(numDays));
    var formatDate = (currentDate.getMonth() + 1) + '/' + currentDate.getDate() + '/' + currentDate.getFullYear();
    //Displays the reformated new date in the Modified Date Field
    $('#modifiedDate').val(formatDate);
  })
})
table {
  border-collapse: separate;
  border-spacing: 15px;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<h2>Trevor Supek - IT 2320 - Lab 10</h2>
<h3>Working with Strings and Dates</h3>
<form>
  <table>
    <tr>
      <td>Select the <strong>Search Character</strong>:</td>
      <td>
        <select id="searchChar">
          <option value=""></option>
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
          <option value="D">D</option>
          <option value="E">E</option>
          <option value="F">F</option>
          <option value="G">G</option>
          <option value="H">H</option>
          <option value="I">I</option>
          <option value="J">J</option>
          <option value="K">K</option>
          <option value="L">L</option>
          <option value="M">M</option>
          <option value="N">N</option>
          <option value="O">O</option>
          <option value="P">P</option>
          <option value="Q">Q</option>
          <option value="R">R</option>
          <option value="S">S</option>
          <option value="T">T</option>
          <option value="U">U</option>
          <option value="V">V</option>
          <option value="W">W</option>
          <option value="X">X</option>
          <option value="Y">Y</option>
          <option value="Z">Z</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Type or paste in some text:</td>
      <td><textarea id="textArea" cols="40" rows="15"></textarea><input type="button" id="generateText" name="generate" value="Generate Text"></td>
    </tr>
    <tr>
      <td>Date Modifier - Number of Days:</td>
      <td><input type="number" id="numDays"></td>
    </tr>
    <tr>
      <td>Number of words entered:</td>
      <td> <input type="text" id="numWords"> </td>
    </tr>
    <tr>
      <td>Number of occurances of the search character:</td>
      <td><input type="text" id="numOccurance"></td>
    </tr>
    <tr>
      <td>Display the entered text in <strong>ALL CAPS</strong>:</td>
      <td> <textarea id="capsText" cols="40" rows="15"></textarea></td>
    </tr>
    <tr>
      <td>Display the entered text with the search character <strong>removed</strong>:</td>
      <td><textarea name="removeChar" id="removeChar" cols="40" rows="15"></textarea></td>
    </tr>
    <tr>
      <td>Add the number of days in Date Modifier to the current date<br />Display the resulting date as MM/DD/YYYY:
      </td>
      <td> <input type="text" id="modifiedDate"> </td>
    </tr>
    <tr>
      <td><input type="reset" id="reset" name="reset" value="Reset"></td>
      <td><input type="submit" id="submit" name="submit" value="Submit"></td>
    </tr>

  </table>
</form>
tkclm6bt

tkclm6bt1#

在您的脚本中,您似乎将removedCharText分配给removeChar,然后立即将文本区域的值重新分配给searchChar。

//Removes Search Character
    var removedCharText = text.replaceAll(searchChar, '');
    $('#removeChar').val(removedCharText);

    $('#removeChar').val(searchChar);

Removing $('# removeChar').瓦尔(searchChar); 解决您的问题

相关问题