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

I want to display a list of dictionary entries in a table using javascript, using some combination of arrays and key/value pairs.

Here is what I’ve got to work so far:

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

Which looks okay, but it would be better (easier to type a large number of entries, and language-agnostic) if I could prepare all entries as a string literal and have the script parse and reorganize it:

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

Performance in the browser is not really a concern at this point, as the end result will not be for a general audience. If performance does ever become a concern, I will serve the dictionary in sections.

The bigger issue right now is that the following code is not working as expected at all. Instead of splitting the string at the :, it’s making arrays of individual letters:

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

Ideally, I would like to create breakpoints at the part-of-speech symbol (noun, verb, etc). I know this can be done with regex like ([w*]) to match [n] or [noun]. And then each numbered meaning after than could be separated using d. to match 1. 2. and so on.

But putting it all together is turning into a long process of trial and error. Any help is appreciated.