You can use a DOMParser, like so:

var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => <a href="#">Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

You cannot directly set .innerHTML property of HTMLElement unless you container element has been enabled lwc:dom="manual" directive. HTML Template Directives

<template>
    <div class="email-text" lwc:dom="manual"></div>
</template>

import { LightningElement } from 'lwc';

export default class App extends LightningElement {
    renderedCallback() {
        this.template.querySelector('.email-text').innerHTML = 
        `<p>Dear Rosario,&nbsp;
             <br /> <br /> <br /> 
             I saw your reply in the mail of case number&nbsp;2227. Please let&#39;s continue messaging here regarding the Delta PC issue and it&#39;s upcoming session, to make sure we are all aligned.&nbsp;
             <br /> <br /> 
             As I wrote in the previous mail, our team will be ready on Monday, Oct 7, at 2 pm Jakarta time.
             <br /> &nbsp;
         </p>`;
    }
}

split the initial string on the comma, then map over the resulting array. On each iteration of map you can then split on the colon, and return a HTML string. You just need to make sure you join the array that map returns into a new string before you add it to the DOM.

const str = 'i1:1,i3:5,i2:5';

const result = str.split(',').map(el => {
  const [key, value] = el.split(':');
  return `<li id="${key}" value="${value}">${value}</li>`;
}).join('');

const ol = document.querySelector('ol');
ol.insertAdjacentHTML('beforeend', `<ul>${result}</ul>`);

<ol />

Additional documentation

• Destructuring assignment

• Template literals

• insertAdjacentHTML