Solution: Convert Text to nicely structured HTML List

Anki Card Design
1

Hello everyone,

I’ve found a solution for converting a text into a nicely structured HTML list.
I’ve initially created a post on reddit for this topic:

I’m sharing the solution here as this could be a time-saver for some of you.

This solution uses numbers followed by a period as a delimiter (i.e. 1. 2. 3. 4.).
Let’s use the Portuguese word “mulher” and its definition as an example.

Field on the note: {{definition in dictionary}}

Input value that will get converted into an ordered html list:

  1. pessoa adulta do sexo feminino 2. esposa 3. coloquial companheira sentimental 4. conjunto das pessoas do sexo feminino

You don’t have to format the text ahead of time.

This is the code that you have to put on your card (front or back as needed):

<script type="text/javascript">

function fc_definitionlist() {
if (!document.getElementById('definition')) {
  return;
}
	var definitionlist = document.getElementById('definition').innerHTML;

<!-- starts with digit+character -->

if (definitionlist.match(/\d\D/)) {
   // Return true
		var regx = "<ol>\n" +
        definitionlist.replace(/\b\d+\.\s+(.+?)\s*(?=\b\d+\. |\s*$)/g, "<li> $1 </li>\n") +
        "</ol>\n";
}
		else var regx = definitionlist

		definitionListElem = document.getElementById('definition');
		definitionListElem.innerHTML = regx

}

fc_definitionlist();

</script>

This is the output on your card (front or back):

1 pessoa adulta do sexo feminino
2 esposa
3 coloquial companheira sentimental 
4 conjunto das pessoas do sexo feminino

Voilá!

If you want to take it a step further by getting rid of the periods and coloring the digits, then put this on your css:

<style>
ol {
list-style: none; 
counter-reset: li;
}

li::before {
	content: counter(li); 
	color: red; /*provide color code here */
        display: inline-block; 
	width: 1em;
        margin-left: -1em;
}
</style>

Cheers!

3 Likes