无法在textarea基础上对键和值都使用javascript进行排序？

我有一个HTML页面，我有一个文本框（键入您的文本）和TextArea列表。我需要输入到文本框中，然后单击添加按钮，以便文本框中的任何内容都会发送到我的TextArea列表中。我需要在文本框中输入以下格式。无法在textarea基础上对键和值都使用javascript进行排序？

Name=Value

此文本框将被用户用来快速添加名称值对到该文本框下面的列表中。我们如果我们在上面的文本框中键入Hello=World，然后单击添加，然后在下面的列表中，应该显示为

Hello=World

如果我们再次在同一文本框中键入ABC=PQR，然后在下面的列表中说，它应该如此显示，这意味着它应该在原始条目下面添加新的名称值对。

Hello=World 
ABC=PQR

但如果语法不正确一样，如果它是不是在名称=值对，那么它应该不添加任何东西到列表，而是显示一个弹出那错的输入格式。名称和值只能包含字母数字字符。现在我有以上所有的东西没有任何问题工作正常。

我还有两个按钮Sort by name和Sort by value。一旦我点击这两个按钮中的任何一个，就应该使用名称或值对TextArea列表中的条目进行排序。这可能使用Javascript吗？我尝试添加两种方法sortByKey和sortByValue，因为我正在使用拆分，排序和连接方法，但它不像预期的那样工作，并且出现了一些问题。我们的jsfiddle。我需要使用纯HTML和Javascript，我不想使用任何库，因为我想保持简单，因为我仍然在学习。我在这里做什么错？

下面是我的代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Test</title> 

<style type="text/css"> 
    #my-text-box { 
     font-size: 18px; 
     height: 1.5em; 
     width: 585px; 
    } 
    textarea{ 
     width:585px; 
     height:300px; 
    } 
    .form-section{ 
     overflow:hidden; 
     width:700px; 
    } 
    .fleft{float:left} 
    .fright{float:left; padding-left:15px;} 
    .fright button{display:block; margin-bottom:10px;} 
</style> 

<script language="javascript" type="text/javascript"> 
    document.getElementById('add').onclick = addtext; 
    function addtext() { 
     var nameValue = document.getElementById('my-text-box').value; 
     if (/^([a-zA-Z0-9]+=[a-zA-Z0-9]+)$/.test(nameValue)) 
      document.getElementById('output').textContent += nameValue + '\n'; 
     else 
      alert('Incorrect Name Value pair format.'); 
    } 

    document.getElementById('sortbykey').onclick = sortByKey; 
    function sortByKey() { 
     var textarea = document.getElementById("output"); 
     textarea.value = textarea.key.split("=").sort().join("\n"); 
    } 

    document.getElementById('sortbyvalue').onclick = sortByValue; 
    function sortByValue() { 
     var textarea = document.getElementById("output"); 
     textarea.value = textarea.value.split("=").sort().join("\n"); 
    } 
</script> 

</head> 

<body> 
<h3>Test</h3> 

<label for="pair">Name/Value Pair</label></br> 
<div class="form-section"> 
    <div class="fleft"> 
     <input type='text' id='my-text-box' value="Name=Value" /> 
    </div> 
    <div class="fright"> 
     <button type="button" id='add' onclick='addtext()'>Add</button> 
    </div> 
</div> 

</br> 
</br> 
</br> 

<label for="pairs">Name/Value Pair List</label></br> 
<div class="form-section"> 
    <div class="fleft"> 
     <textarea id='output'></textarea> 
    </div> 
    <div class="fright"> 
     <button type="button" id='sortbykey' onclick='sortByKey()'>Sort by name</button> 
     <button type="button" id='sortbyvalue' onclick='sortByValue()'>Sort by value</button> 
    </div> 
</div> 

</body> 
</html>

来源

2015-09-06 user1950349

怎么样从你最后一个问题（http://stackoverflow.com/questions/32417786/how-to-add-value-in-a-text-area-from-a-textbox-and-then-sort此不同-它）？ – j08691

我编辑我的问题只有添加功能，但我没有从标题中删除它。在这里，我特别关注排序问题，并以某种方式不使用我的代码。 – user1950349

'未捕获的ReferenceError：sortByValue不defined' – Rayon

你需要用线的textarea然后split每行拆分，以便能够要么比较名称或价值。现在，你只会分裂一次。

所以顺序应该是：

split您在array行 - 你只需要('\n')更换('=')。
对于您比较的每一行，或者name或value - 这些可以在sort中完成。 Sort将已经通过您的线array，并允许您定义要比较的元素。

你可以这样说：

function sortByKey() { 
    var textarea = document.getElementById("output"); 
    textarea.value = textarea.value.split("\n").sort(function(a, b){ 
     if(a != "" && b != ""){//this because you have empty lines to handle 
      return a.split('=')[0].localeCompare(b.split('=')[0]) 
     } else { 
      return 0 
     } 
    }).join("\n"); 
}

https://jsfiddle.net/56hs2nmn/

通过值排序，您只需使用a.split('=')[1].localeCompare(b.split('=')[1])。

您可以通过值和关键看那种几乎是一模一样的，你应该尝试只有一个function两个优化。并且通过使用变量而不是将其全部放在一行中来澄清步骤。但它应该把你放在正确的方向。

来源

2015-09-06 03:34:26

谢谢Julien。它按预期工作，我也了解你的解释。赞赏你的帮助。另外，如果我添加删除按钮以及下方'排序Value'按钮，该按钮有权删除任何行，我选择的，就像如果我选择了'你好= World'那么就应该删除。基本上，当按下Delete按钮时，应该删除列表框中的所有选定项目。你知道我们如何做到这一点吗？ – user1950349

您可以使用Selection（）对象。最简单的wat将是deleteFromDocument，但我不确定它是否与所有浏览器兼容。但是，还有其他的方式，可以去除选择，例如，等有了deleteFromDocument的节点：https://jsfiddle.net/56hs2nmn/10/ –

这可能是工作

https://jsfiddle.net/68cp72s6/

(function() { 
    "use strict"; 

    var dom = getDom(["user", "output", "add", "sortbykey", "sortbyvalue"], {}); 
    var rx = /[\w]+=[\w]+/; 
    var model = []; 

    function add() { 
     var input = dom.user.value; 
     if (!rx.test(input)) return; 
     var split = input.split("="); 
     var obj = { key: split[0], val: split[1] }; 
     model.push(obj); 
     viewModel(model); 
    } 

    function viewModel(input) { 
     var data = JSON.stringify(input, null, 2); 
     dom.output.value = data; 
    } 

    function getDom(arr, tmp) { 
     arr.forEach(function(s) { 
      tmp[s] = document.getElementById(s); 
     }); 
     return tmp; 
    } 

    function sorter(prop) { 
     return function() { 
      var sorted = model.sort(function(a, b) { 
       if (a[prop] < b[prop]) return -1; 
       if (a[prop] > b[prop]) return 1; 
      }); 
      viewModel(sorted);    
     } 
    } 

    dom.add.addEventListener("click", add); 
    dom.sortbykey.addEventListener("click", sorter("key")); 
    dom.sortbyvalue.addEventListener("click", sorter("val")); 

})();

来源

2015-09-06 02:25:07

感谢您的帮助。但我不想在JSON中做这个，我想保持它的格式，我已经有了。与“Name = Value”对一样。有什么方法可以使用我使用的相同格式来做到这一点？我认为应该很容易做到这一点。我在代码中做了什么错误？ – user1950349

@ user1950349不难做到。 https://jsfiddle.net/68cp72s6/1/ –

它的工作原理就像一个魅力。非常感谢。它看起来像你删除了我的add方法，并为它做了一些新的方法。在我最初的'Add'方法中，我检查了只能添加'Name = Value'对格式，并且Names和Values只能包含字母数字字符。所以现在，如果我需要在你的方法中做同样的事情，那么我将如何做到这一点。在我原来的方法中，如果有人输入无效格式，我会显示警告框。 – user1950349

无法在textarea基础上对键和值都使用javascript进行排序？

回答

相关问题