anki-ru-def-splitting

by OjisanSeiuchi

HTML

<div class="rudef" style="text-align: left; padding-left: 20px; padding-right: 20px; font-weight: 600;">
  <p><em>книжн.</em>, <em>поэт.</em> волшебство, колдовство; <em>книжн.</em>, <em>поэт.</em>, <em>перен.</em> пленительная власть, обаяние, очарование</p>

</div>

CSS

:root {
	--russian-red-colour: #D16D43;
	--medium-grey-colour: #7e7e7e;
	--medium-grey-2-colour: #d9d9d9; /* used in collapsible */
	--light-grey-colour: #CECECE;
	--medium-blue-grey-coulour: #a5abb3;
	--dark-grey-colour: #6f6f6f; /* used in collapsible */
	--header-title-grey-colour: #727272;
	--sans-serif-font: "Futura", "Avenir Next", "Futura", arial, "PT Sans";
	--serif-font-list: "PT Serif Caption", Georgia, "PT Serif", "Times New Roman", serif;
	--standard-background-grey-colour: #EDEDED;
	--slate-green-colour: #516f76;
	
	/* https://www.htmlcsscolor.com/hex/A1B6B9 "Casper" */
	--casper-colour: #A1B6B9;
}

.rudef {
   color: var(--russian-red-colour);
   text-align: center;
   font-size: 20px;
}

div.rudef em { color: #e8b6a1; }

JavaScript

function coalesceEMTags(elHTML) {
	elHTML = elHTML.replace(/<em>([^<>]*)<\/em>, <em>([^<>]*)<\/em>/g, "<em>$1, $2</em>");
    elHTML = elHTML.replace(/<em>([^<>]*)<\/em>: <em>([^<>]*)<\/em>/g, "<em>$1, $2</em>");
   return elHTML;
   elHTML = elHTML.replace(/<em>([^<>]*)<\/em>, <em>([^<>]*)<\/em>,[\s\n.]*<em>([^<>]*)<\/em>/g, "<em>$1, $2, $3</em>")
}

function elementIsP(el) {
	return (el.tagName.toLowerCase() === 'p');
}

function elementIsEM(el) {
	return (el.tagName.toLowerCase() === 'em');
}

function breakOnEM(brElement) {
   let defparent = document.getElementsByClassName('rudef')[0];
   // coalesce adjacent <em> tags so we don't add breaks 
	 // unnecessarily
   defparent.innerHTML = coalesceEMTags(defparent.innerHTML);
   var descendants = defparent.querySelectorAll("*");
   let ignoreEM = false;
   for (var i = 0; i < descendants.length; i++) {
      let thisDescendant = descendants[i];

      if (elementIsP(thisDescendant) ) {
         let elHTML = thisDescendant.innerHTML;
         // if the first descendant after <p> is <em>, ignore
         // because we don't want to add a line break
         // on the first one
         ignoreEM = elHTML.startsWith('<em>');
      }
      if ( elementIsEM(thisDescendant) ) {
         if (!ignoreEM) {
            // check if the content is just an abbreviation
            // there may be others, so we need to watch
            if (thisDescendant.textContent === 'гл.') {
               continue;
            }
            const elem = document.createElement(brElement);
            thisDescendant.parentNode.insertBefore(elem, thisDescendant);
         } else {
            ignoreEM = false;
         }
      }
   }
}

breakOnEM('p');