JavaScript: 如何解析然后渲染字典条目的集合？（数组，键值，排序问题）

Question

我想使用 javascript 在 table 中显示字典条目列表，使用数组和 key/value 对的某种组合。

这是我目前要做的工作：

let d = new Map();

d.set('stack', '[n] 1. an orderly pile 2. a list in which the next item to be removed is the most recently stored [v] 1. to arrange in order 2. to arrange in stacks')
d.set('overflow', '[n] 1. a large flow 2. the occurrence of surplus liquid')
;

document.write("<table>");

for (const [key, value] of d.entries()) {
document.write("<tr><td class=\"word\">"+key+": "+"</td>" + "<td class=\"def\">"+value+"</td>\n");
}

document.write("</table>");

table {
    border: solid thin; 
    border-collapse: collapse;
}
td, th {
    border-collapse: collapse;
    border: 1.5px solid #aaa;
    padding: 4px 6px;
}
td.word {
    background-color: #cee5ec;
    vertical-align: top;
    border-right-width: 0px;
}
td.def {
    background-color: #eee;
    border-left-width: 0px;
}

这看起来不错，但如果我可以将所有条目准备为字符串文字并让脚本解析和重组它会更好（更容易键入大量条目，并且与语言无关）：

let d = new Map();

let ddata = (`
stack: [n] 1. an orderly pile 2. a list in which the next item to be removed is the most recently stored [v] 1. to arrange in order 2. to arrange in stacks

overflow: [n] 1. a large flow 2. the occurrence of surplus liquid
`).split('\n');

for (let i = 0; i < ddata.length; i++) {
    ddata[i].split(': ');
    d.set(ddata[i][0]), d.set(ddata[i][1]);
}

document.write("<table>");

for (const [key, value] of d.entries()) {
document.write("<tr><td class=\"word\">"+key+": "+"</td>" + "<td class=\"def\">"+value+"</td>\n");
}

document.write("</table>");

table {
    border: solid thin; 
    border-collapse: collapse;
}
td, th {
    border-collapse: collapse;
    border: 1px solid #aaa;
    padding: 4px 6px;
}
td.word {
    background-color: #cee5ec;
    vertical-align: top;
    border-right-width: 0px;
}
td.def {
    background-color: #eee;
    border-left-width: 0px;
}

目前浏览器的性能并不是一个真正的问题，因为最终结果不会面向普通观众。如果性能确实成为一个问题，我将分段提供字典。

现在更大的问题是下面的代码根本没有按预期工作。它不是在 : 处拆分字符串，而是制作单个字母的数组：

ddata[i].split(': ');
    d.set(ddata[i][0]), d.set(ddata[i][1]);

理想情况下，我想在词性符号（名词、动词等）处创建断点。我知道这可以用像 (\[\w*\]) 这样的正则表达式来匹配 [n] 或 [noun]。然后可以使用 \d. 来匹配 1. 2. 等来分隔 than 之后的每个编号含义。

这是所需最终结果的粗略静态 HTML 示例：

table {
    border: solid thin; 
    border-collapse: collapse;
}
td, th {
    border-collapse: collapse;
    border: 1px solid #aaa;
    padding: 4px 6px;
}
td.word {
    background-color: #cee5ec;
    vertical-align: top;
    border-right-width: 0px;
}
td.def {
    background-color: #eee;
    border-left-width: 0px;
}

.pos {
    font-weight: bold;
}
.num {
    display: inline-block;
    background-color: #fff;
    border-radius: 16px;
    padding: 1px 0px 0px 4px;
    width: 15px;
    height: 18px;
    font-family: sans-serif;
    color: #555;
    font-size: 14px;
    font-weight: 200;
    border: 1px solid #ccc;
}

<table>
    <tr>
        <td class="word">stack:</td><td class="def"><span class="pos">[n]</span> <span class="num">1.</span> an orderly pile <span class="num">2.</span> a list in which the next item to be removed is the most recently stored</br><span class="pos">[v]</span> <span class="num">1.</span> to arrange in order <span class="num">2.</span> to arrange in stacks</td>
    </tr>

    <tr>
        <td class="word">overflow:</td><td class="def"><span class="pos">[n]</span> <span class="num">1.</span> a large flow <span class="num">2.</span> the occurrence of surplus liquid</td>
    </tr>
</table>

↑ 注意 [n] 和 [v] 类别之间的 </br>，<span> 标签包装 [n] 和 1.（带有类 pos 和 num。

把它们放在一起变成了一个漫长的试错过程。感谢任何帮助。

Answer 1

.split 在字符串上创建一个新数组，它不会“就地”更改任何内容。

您必须存储结果：

const [ key, value ] = ddata[i].split(': ');
d.set(key, value);

您可能还想过滤掉空行：

("...").split('\n').filter(s => s.length);

另请注意，您的新方法仅在您的值字符串不包含 ": " 时才有效。如果你想确保只有 first ": " 用于在键和值之间进行拆分，你可以这样做：

const [ key, ...values ] = ddata[i].split(": ");
d.set(key, values.join(": "));

let d = new Map();

let ddata = (`
stack: [n] 1. an orderly pile 2. a list in which the next item to be removed is the most recently stored [v] 1. to arrange in order 2. to arrange in stacks

overflow: [n] 1. a large flow 2. the occurrence of surplus liquid
`).split('\n').filter(s => s.length);

for (let i = 0; i < ddata.length; i++) {
    const [ key, value ] = ddata[i].split(': ');
    d.set(key, value);
}

document.write("<table>");

for (const [key, value] of d.entries()) {
document.write("<tr><td class=\"word\">"+key+": "+"</td>" + "<td class=\"def\">"+value+"</td>\n");
}

document.write("</table>");

table {
    border: solid thin; 
    border-collapse: collapse;
}
td, th {
    border-collapse: collapse;
    border: 1px solid #aaa;
    padding: 4px 6px;
}
td.word {
    background-color: #cee5ec;
    vertical-align: top;
    border-right-width: 0px;
}
td.def {
    background-color: #eee;
    border-left-width: 0px;
}

Answer 2

对于你来说，当你在“/n”处吐口水时，它有空行，所以你需要过滤掉它们。这是我想出的：

let d = new Map();

let ddata = `
stack: [n] 1. an orderly pile 2. a list in which the next item to be removed is the most recently stored [v] 1. to arrange in order 2. to arrange in stacks

overflow: [n] 1. a large flow 2. the occurrence of surplus liquid
`.split('\n') // Spits at newline
  .filter(ddata => ddata.length > 0) // Filters every line that is empty
  .map(ddata => ddata.split(':')) // Splits at colon
  .forEach(ddata => { // For each line adds the word/key and def/value to the map
    d.set(ddata[0], ddata[1].trim());
  })

document.write("<table>");

for (const [key, value] of d.entries()) {
  document.write("<tr><td class=\"word\">"+key+": "+"</td>" + "<td class=\"def\">"+value+"</td>\n");
}

document.write("</table>");

JavaScript: 如何解析然后渲染字典条目的集合？（数组，键值，排序问题）

JavaScript: How to parse and then render a collection of dictionary entries? (arrays, key-value, sorting problem)

javascript

regex

arrays

sorting

key-value

JavaScript: 如何解析然后渲染字典条目的集合？ （数组，键值，排序问题）

JavaScript: How to parse and then render a collection of dictionary entries? (arrays, key-value, sorting problem)

javascript

regex

arrays

sorting

key-value

JavaScript: 如何解析然后渲染字典条目的集合？（数组，键值，排序问题）