Fatal编程技术网
  • javascript/
  • 无法使用javascript根据键和值对textarea中的条目进行排序？

无法使用javascript根据键和值对textarea中的条目进行排序？

javascript html css sorting

无法使用javascript根据键和值对textarea中的条目进行排序？,javascript,html,css,sorting,Javascript,Html,Css,Sorting,我有一个html页面，其中有一个文本框（键入文本）和文本区域列表。我需要在文本框中键入内容，然后单击“添加”按钮，这样文本框中的任何内容都会进入我的文本区域列表。我需要在文本框中输入以下格式 Name=Value 用户将使用此文本框将名称-值对快速添加到该文本框正下方的列表中。假设我们在上面的文本框中键入Hello=World，然后单击add，那么在下面的列表中，它应该显示为 Hello=World 如果我们在同一个文本框中再次键入ABC=PQR，那么在下面的列表中，它应该显示为这样，这意味

我有一个html页面，其中有一个文本框（键入文本）和文本区域列表。我需要在文本框中键入内容，然后单击“添加”按钮，这样文本框中的任何内容都会进入我的文本区域列表。我需要在文本框中输入以下格式

Name=Value
用户将使用此文本框将名称-值对快速添加到该文本框正下方的列表中。假设我们在上面的文本框中键入
Hello=World
，然后单击add，那么在下面的列表中，它应该显示为

Hello=World
如果我们在同一个文本框中再次键入
ABC=PQR
，那么在下面的列表中，它应该显示为这样，这意味着它应该继续在其原始条目下方添加新的名称-值对

Hello=World
ABC=PQR
但是如果语法不正确，比如它不在Name=Value对中，那么它不应该向列表中添加任何内容，而是显示一个输入格式错误的弹出窗口。名称和值只能包含字母数字字符。现在我已经把以上所有的事情都做好了，没有任何问题

我还有另外两个按钮
按名称排序
和
按值排序
。一旦我点击这两个按钮中的任何一个，它就会使用名称或值对TextArea列表中的条目进行排序。使用Javascript可以做到这一点吗？我尝试添加了两个方法
sortByKey
和
sortByValue
，因为我正在使用split、sort和join方法，但它没有按预期工作，而且有些事情搞砸了

这是我的名片。我需要使用简单的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>


试验
#我的文本框{
字号：18px；
高度：1.5em；
宽度：585px；
}
文本区{
宽度：585px；
高度：300px；
}
.表格组{
溢出：隐藏；
宽度：700px；
}
.fleft{float:left}
.fright{float:左；padding left:15px；}
.fright按钮{显示：块；页边距底部：10px；}
document.getElementById（'add'）。onclick=addtext；
函数addtext（）{
var nameValue=document.getElementById（'my-text-box'）.value；
如果（/^（[a-zA-Z0-9]+=[a-zA-Z0-9]+）$/。测试（名称值））
document.getElementById（'output'）.textContent+=nameValue+'\n'；
其他的
警报（“名称-值对格式不正确”）；
}
document.getElementById（'sortbykey'）。onclick=sortbykey；
函数sortByKey（）{
var textarea=document.getElementById（“输出”）；
textarea.value=textarea.key.split（“=”）.sort（）.join（“\n”）；
}
document.getElementById（'sortbyvalue'）。onclick=sortbyvalue；
函数sortByValue（）{
var textarea=document.getElementById（“输出”）；
textarea.value=textarea.value.split（“=”）.sort（）.join（“\n”）；
}
试验
名称/值对

添加






名称/值对列表

按名称排序
按值排序
这可能有效

（函数（）{
“严格使用”；
var dom=getDom（[“用户”、“输出”、“添加”、“sortbykey”、“sortbyvalue”]，{}）；
变量rx=/[\w]+=[\w]+/；
var模型=[]；
函数add（）{
var输入=dom.user.value；
如果（！接收测试（输入））返回；
var split=input.split（“=”）；
var obj={key:split[0]，val:split[1]}；
模型推力（obj）；
视图模型（模型）；
}
功能视图模型（输入）{
var data=JSON.stringify（输入，null，2）；
dom.output.value=数据；
}
函数getDom（arr、tmp）{
arr.forEach（函数）{
tmp[s]=document.getElementById；
});
返回tmp；
}
功能分拣机（prop）{
返回函数（）{
var sorted=model.sort（函数（a，b）{
如果（a[prop]b[prop]）返回1；
});
视图模型（已排序）；
}
}
dom.add.addEventListener（“单击”，添加）；
dom.sortbykey.addEventListener（“单击”，排序器（“键”）；
dom.sortbyvalue.addEventListener（“单击”，排序器（“val”）；
})();
您需要将
文本区域
按行分割，然后
分割
每行，以便能够比较名称或值。现在，你只会分手一次

因此，顺序应该是：

  • 拆分
    数组中的行
    -只需将
    （'='）
    替换为
    （'\n'）
    

  • 对于每一行，您可以比较
    名称
    或
    值
    ——这些可以在
    排序
    中完成<代码>排序
    • 将已经通过您的行
    数组
    并允许您定义要比较的元素
您可以这样做：

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");
}

要按值排序，只需使用
a.split（'='）[1].localeCompare（b.split（'='）[1]）

您将看到“按值排序”和“按键排序”几乎完全相同，您应该尝试通过两个函数都只有一个
函数来进行优化。并通过使用变量而不是将所有变量都放在一行中来阐明步骤。但这应该会让你找到正确的方向。
这与你的上一个问题有什么不同（）？我编辑了我的问题，使其只有“添加”功能，但没有将其从标题中删除。在这篇文章中，我特别关注排序，但不知何故，排序与我的代码无关。
uncaughtreferenceerror:sortByValue未定义
感谢您的帮助。但我不想用JSON做这个，我想保持我已有的格式。仅像
Name=Value
对。我们有没有办法用和我一样的格式？我想这应该很容易做到。我在我的代码中做错了什么？它就像一个符咒。谢谢。看起来您删除了我的add方法，并为我创建了一些新方法

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");
}