string methods file

                Never    
Text
        
Download Raw Clone Report Copy 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task1</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <div class="p-4">
      <textarea
        class="form-control"
        placeholder="Enter text here"
        id="textarea"
        style="height: 100px"
        onkeyup="textfn(this.value)"
        value="this is too good that i want a very good pastry which i will eat in morning."
      ></textarea>
    </div>
    <div
      class="alert alert-danger"
      style="max-height: 200px; overflow-y: scroll"
      id="content"
    ></div>
    <table style="width: 100%;">
      <tr>
        <td>
          <div class="task2 mt-4 p-4">
            <button class="btn btn-info m-2" onclick="len()">Find length</button>
            <span class="alert alert-danger d-none" id="len"></span>
          </div>
        </td>
        <td>
          <div class="task7 mt-4 p-4">
            <button class="btn btn-info m-2" onclick="nowords()">numberof words</button>
            <span class="alert alert-danger d-none" id="nowords"></span>
          </div>
        </td>
      </tr>
    </table>

    <table style="width: 100%">
      <tr>
        <td>
          <div class="task4 mt-4 p-4">
            <h1 class="m-2" onclick="upcase()">Uppercase</h1>
            <div
              class="alert alert-danger"
              style="max-height: 200px; overflow-y: scroll"
              id="upcase"
            ></div>
          </div>
        </td>
        <td>
          <div class="task5 mt-4 p-4">
            <h1 class="m-2" onclick="locase()">Lowercase</h1>
            <div
              class="alert alert-danger"
              style="max-height: 200px; overflow-y: scroll"
              id="locase"
            ></div>
          </div>
        </td>
      </tr>
    </table>
    <div class="border border-2 p-4 m-3 border-danger rounded-lg ">

      <div class="task3 mt-4 p-4">
        <button class="btn btn-info m-2" onclick="len_four_words()">Find 4 length words</button>
      <span class="alert alert-danger d-none" id="lenfourspan"></span>
      <div
        class="alert alert-danger"
        id="lenfour"
        style="max-height: 200px; overflow-y: scroll"
      ></div>
    </div>
    <div class="task6 mt-4 p-4">
      <button class="btn btn-info m-2" onclick="rmspace()">remove space</button>
      <div
        class="alert alert-danger"
        id="rmspace"
        style="max-height: 200px; overflow-y: scroll;overflow-wrap: break-word;"
      ></div>
    </div>

    <div class="task7 mt-4 p-4">
      <button class="btn btn-info m-2" onclick="replaceIstoAm()">replace is to am</button>
      <div
        class="alert alert-danger"
        id="replace"
        style="max-height: 200px; overflow-y: scroll"
      ></div>
    </div>
    
    <div class="task8 mt-4 p-4">
      <button class="btn btn-info m-2" onclick="convertarray()">convert in array</button>
      <div
      class="alert alert-danger"
      id="array"
      style="max-height: 200px; overflow-y: scroll;overflow-wrap: break-word;"
      ></div>
    </div>
  </div>
    
    <script>
      let val;
      function textfn(param) {
        val = param;
        document.getElementById("content").innerHTML = val;
        document.getElementById("upcase").innerText = val.toUpperCase();
        document.getElementById("locase").innerText = val.toLowerCase();
      }
      function len() {
        let data = document.getElementById("textarea").value;
        document.getElementById("len").innerText = data.length;
        document.getElementById("len").classList.remove("d-none");
      }
      function nowords() {
        let data = document.getElementById("textarea").value.split(" ");
        if (data[0] === "") {
          document.getElementById("nowords").innerText = 0;
        } else {
          document.getElementById("nowords").innerText = data.length;
        }
        document.getElementById("nowords").classList.remove("d-none");
      }
      function rmspace() {
        let data = document.getElementById("textarea").value.split(" ").join("");
        document.getElementById("rmspace").innerText = data;
      }
      function len_four_words() {
        let data = document.getElementById("textarea").value.split(" ");
        let four_words = data.filter((item) => item.length == 4);
        console.log(four_words.length);
        document.getElementById("lenfourspan").innerHTML = four_words.length;
        document.getElementById("lenfour").innerText = four_words.join(" ");
        if (four_words.length > 0)
          document.getElementById("lenfourspan").classList.remove("d-none");
        document.getElementById("lenfour").classList.remove("d-none");
      }

      function replaceIstoAm() {
        let data = val;
        // let data = "this is not good but i am working for you so is please let be good"
        document.getElementById("replace").innerText = data.replaceAll(" is ", " am ");
        document.getElementById("replace").innerText = data.replaceAll(" IS ", " AM ");
      }
      function convertarray() {
        let data = val;
        document.getElementById("array").innerText = data.split(" ");
      }
    </script>
  </body>
</html>

Raw Text

Recent Public Pastes