如何使用javascript按字母顺序对textarea标签进行排序并在另一个textarea标签中

4回答

斯蒂芬大帝

首先，我首先将元素split()的值textarea放入数组中：//split the value on a space characterlet wordsArr = document.querySelector('#input').value.split(' ');然后对数组进行排序：wordsArr.sort((a, b) => {    const word1 = a.toUpperCase();    const word2 = b.toUpperCase();    if (word1 < word2) {        return -1;    }    if (word2 > word1) {        return 1;    }    /* if neither of those if statements fire, that means the words are the     same and can stay in the same position */    return 0;};然后将数组元素连接回单个字符串，并将其设置为其他文本区域的值：document.querySelector('#output').value = wordsArr.join(' ');

0 0

呼啦一阵风

我也会从分裂开始，但我们不要重新发明世界。您可以在 4 行函数中使用 js 数组排序、toString 和替换方法function myFunction(){   var text = document.getElementById('input').value;   var textArray = text.split(" ").sort();   var output= document.getElementById('output');   output.value = textArray.toString().replace(/,/g," ");}.con {    display: flex;     margin-top: 2px;    margin-left: 20px;}.button {    background: #4CAF50;    border: none;    outline: none;    color: #ffffff;    padding: 14px;    height: 60px;    width: 140px;    border-radius: 0 10px;    margin-top: 0px;    font-size: 22px;    cursor: pointer;}.txt {    display: flex;     margin-right: 20px;    background: #ffffff;    border: 0;    outline: none;    height: 700px;    width: 45%;    border-radius: 10px;    box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);    margin-top: 0px;}.text {    border: none;    margin-top: 18px;    margin-left: 18px;    height: 660px;    width: 630px;    outline: none;    font-size: 22px;    resize: none;}.asci {    background: #ffffff;    border: 0;    outline: none;    height: 700px;    width: 45%;    border-radius: 10px;    box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}.ascii {    border: none;    margin-top: 20px;    margin-left: 10px;    height: 660px;    width: 640px;    outline: none;    font-size: 22px;    resize: none;}<html><head>    <title>alphabetical order machine</title>    <link rel="stylesheet" href="ascii.css"></head><body>    <div class="con">    <form class="txt">        <textarea class="text"  id="input" type="text" placeholder="type your text here"></textarea>                <input class="button" type='button' value="alphabetize" onclick="myFunction()">    </form>    <form class="asci">        <textarea class="ascii" id="output" type="text" placeholder="your alphabetized text will appear here"></textarea>    </form>    </div>    <script src="ascii.js"></script></body></html>

0 0

PIPIONE

注册“输入”和“点击”事件以形成。为每个事件创建一个事件处理程序。document.forms.ID.oninput = inputHandler;document.forms.ID.onclick = clickHandler;创建事件处理程序时，传递事件对象function inputHandler(e) {...定义引用的变量：所有表单字段的 NodeList/* - "this" is the form tag- .elements is a property that collects all form type tags*/const field = this.elements;用户与之互动的标签 /* - e.target property always points to the tag a user has clicked, changed,      entered data upon, etc.*/const input = e.target;任何其他相关标签，例如输出/*- Any input, output, textarea, etc you want to access just prefix the NodeList  identifier (see first variable) to any form type tag #id or [name]*/const output = field.output;接下来，定义一个条件来确定您要处理哪个标签（通常是e.target）而不是其他任何内容。通过排除其他不必要的标签，您可以完全控制做什么以及如何完成。if (e.target.id === 'input') {.../* OR */if (e.target.className === 'button') {...演示const form = document.forms.editor;form.oninput = copyText;form.onclick = sortText;function copyText(e) {  const ui = this.elements;  const inp = e.target;  const out = ui.output;  if (inp.id === 'input') {    out.value = inp.value;  }}function sortText(e) {  const ui = this.elements;  const btn = e.target;  const out = ui.output;  if (btn.className === "button") {    let result = out.value.split(' ').sort((a, b) => a - b);    out.value = result;  }}.box {  display: flex;  flex-flow: column nowrap;  justify-content: center;  align-items: center;}textarea {  width: 90vw;  height: 30vw;}.button {  display: block;  width: 90vh;  height: 5vw;  margin: 5px auto;}<!DOCTYPE html><html><head>  <meta charset='utf-8'>  <title></title></head><body>  <form id="editor">    <fieldset>      <textarea id="input" placeholder="Enter a space-delimited list of items here"></textarea>      <button class="button" type='button'>Sort</button>      <textarea id="output" placeholder="Sorted list will be provided here"></textarea>    </fieldset>  </form></body></html>

0 0

潇湘沐

您需要使用split()和sort()。这是你的代码：function myFunction() {  const input1 = document.getElementById("input");  const input2 = document.getElementById("output");    let content = input1.value; //Get its content  var array = content.split(" "); //And replace each space by a comma to make an array.    input2.value = array.sort();    //alphabetize it!  input2.value = input2.value.replace(",", " "); //Restore the spaces.}.con {    display: flex;     margin-top: 2px;    margin-left: 20px;}.button {    background: #4CAF50;    border: none;    outline: none;    color: #ffffff;    padding: 14px;    height: 60px;    width: 140px;    border-radius: 0 10px;    margin-top: 0px;    font-size: 22px;    cursor: pointer;}.txt {    display: flex;     margin-right: 20px;    background: #ffffff;    border: 0;    outline: none;    height: 700px;    width: 45%;    border-radius: 10px;    box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);    margin-top: 0px;}.text {    border: none;    margin-top: 18px;    margin-left: 18px;    height: 660px;    width: 630px;    outline: none;    font-size: 22px;    resize: none;}.asci {    background: #ffffff;    border: 0;    outline: none;    height: 700px;    width: 45%;    border-radius: 10px;    box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}.ascii {    border: none;    margin-top: 20px;    margin-left: 10px;    height: 660px;    width: 640px;    outline: none;    font-size: 22px;    resize: none;}<head>    <title>alphabetical order machine</title></head><body>    <div class="con">    <form class="txt">        <textarea class="text"  id="input" type="text" placeholder="type your text here"></textarea>                <input class="button" type='button' value="alphabetize" onclick="myFunction();">    </form>      <form class="asci">          <textarea class="ascii" id="output" type="text" placeholder="your alphabetized text will appear here"></textarea>      </form>    </div></body>

0 0