Как разобрать строку, чтобы она правильно отображалась в angular

Question

Этот вопрос далее ссылается Проблема с ul li с использованием Angular 6 и Typescript

Это строка:

There are 4 required fields that you must complete to initial:<br><ul class="avatar-list"><li><a>Item 1:</a></li><li><a>Item 2</a></li><li><a>Item 3</a></li><li><a>Item 4</a></li></ul>

То, что отображается, состоит в том, что LI не содержат ТЕКСТ, который должен быть внутри.

<ul>
  <li></li>
  "Item 1"
  <li></li>
  "Item 2"
  <li></li>
  "Item 3"
  <li></li>
  "Item 4"
</ul>

Это то, как мне это нужно для визуализации ....

<ul>
  <li>"Item 1"</li>
  <li>"Item 2"</li>
  <li>"Item 3"</li>
  <li>"Item 4"</li>
</ul>

Я полагаю, что приведенный ниже синтаксический анализатор облажается и не выполняет то, что должен.

Приведенная выше строка анализируется с помощью этого кода:

// Parse hyperlines <a> in string
const object: any[][] = [];
if (text) {
  // Make the first char uppercase
  if (text.length > 0) {
    text = text.charAt(0).toUpperCase() + text.substring(1);
    if (response) {
      object.push([text, response]);
    } else {
      // Create text and link array for presentation in browser
      // while (text.length > 0) {
      // Check for <a> link tags
      let startIndex = text.indexOf(this.StartHyperLink);
      while (startIndex !== -1) {
        // Add text
        object.push([text.substring(0, startIndex), false]);
        // Add link
        startIndex += this.StartHyperLink.length;
        let endIndex = text.indexOf(this.EndHyperLink);
        if (endIndex === -1) {
          endIndex = text.length;
        }
        object.push([text.substring(startIndex, endIndex), true]);
        if (endIndex + this.EndHyperLink.length <= text.length) {
          endIndex += this.EndHyperLink.length;
        }
        text = text.substring(endIndex);
        startIndex = text.indexOf(this.StartHyperLink);
      }
      object.push([text, false]);
    }
    // object.push([text, response]);
    console.log('object.. ', object);
    this.paperTape.push([object, response]);
  }
}

Это неправильно анализируется и, следовательно, результат, который я получаю в журнале консоли Chrome ниже

    <div _ngcontent-c2="" class="hideShowContainer ng-tns-c2-0 ng-trigger ng-trigger-hideShowAvatar ng-star-inserted" id="hideshow0">
     <div _ngcontent-c2="" class="miniusercont" id="usercont0">
        <!--bindings={
           "ng-reflect-ng-if": "false"
           }--><!--bindings={
           "ng-reflect-ng-if": "false"
           }-->
     </div>
     <div _ngcontent-c2="" class="ng-tns-c2-0" id="lucycont0">
        <!--bindings={
           "ng-reflect-ng-if": "true"
           }--><img _ngcontent-c2="" alt="" class="minilucy ng-tns-c2-0 ng-star-inserted" src="img/lucy_l.svg" id="imglucy0" style=""><!--bindings={
           "ng-reflect-ng-if": "true"
           }-->
        <div _ngcontent-c2="" class="arrow_box ng-tns-c2-0 ng-star-inserted" style="">
           <!--bindings={
              "ng-reflect-ng-if": "2"
              }--><!----><!--bindings={
              "ng-reflect-ng-for-of": " There are 4 required fields t"
              }-->
           <div _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted">
              <!--bindings={
                 "ng-reflect-ng-if": "true"
                 }-->
              <span _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted" id="message[0]-0">
                 There are 4 required fields that you must complete to initial:<br>
                 <ul class="avatar-list">
                    <li></li>
                 </ul>
              </span>
              <!--bindings={
                 "ng-reflect-ng-if": "false"
                 }-->
           </div>
           <div _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted">
              <!--bindings={
                 "ng-reflect-ng-if": "false"
                 }--><!--bindings={
                 "ng-reflect-ng-if": "true"
                 }--><span _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted" id="message[1]-0"><a _ngcontent-c2="" class="ng-tns-c2-0" href="javascript:;">I attest, under penalty of perjury, that I am:</a></span>
           </div>
           <div _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted">
              <!--bindings={
                 "ng-reflect-ng-if": "true"
                 }-->
              <span _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted" id="message[0]-0">
                 <li></li>
              </span>
              <!--bindings={
                 "ng-reflect-ng-if": "false"
                 }-->
           </div>
           <div _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted">
              <!--bindings={
                 "ng-reflect-ng-if": "false"
                 }--><!--bindings={
                 "ng-reflect-ng-if": "true"
                 }--><span _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted" id="message[1]-0"><a _ngcontent-c2="" class="ng-tns-c2-0" href="javascript:;">Form I-94 admission number</a></span>
           </div>
           <div _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted">
              <!--bindings={
                 "ng-reflect-ng-if": "true"
                 }-->
              <span _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted" id="message[0]-0">
                 <li></li>
              </span>
              <!--bindings={
                 "ng-reflect-ng-if": "false"
                 }-->
           </div>
           <div _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted">
              <!--bindings={
                 "ng-reflect-ng-if": "false"
                 }--><!--bindings={
                 "ng-reflect-ng-if": "true"
                 }--><span _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted" id="message[1]-0"><a _ngcontent-c2="" class="ng-tns-c2-0" href="javascript:;">Foreign passport number</a></span>
           </div>
           <div _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted">
              <!--bindings={
                 "ng-reflect-ng-if": "true"
                 }-->
              <span _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted" id="message[0]-0">
                 <li></li>
              </span>
              <!--bindings={
                 "ng-reflect-ng-if": "false"
                 }-->
           </div>
           <div _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted">
              <!--bindings={
                 "ng-reflect-ng-if": "false"
                 }--><!--bindings={
                 "ng-reflect-ng-if": "true"
                 }--><span _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted" id="message[1]-0"><a _ngcontent-c2="" class="ng-tns-c2-0" href="javascript:;">Country of issuance</a></span>
           </div>
           <div _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted">
              <!--bindings={
                 "ng-reflect-ng-if": "true"
                 }--><span _ngcontent-c2="" class="ng-tns-c2-0 ng-star-inserted" id="message[0]-0"></span><!--bindings={
                 "ng-reflect-ng-if": "false"
                 }-->
           </div>
           <!---->
        </div>
     </div>
     <!--bindings={
        "ng-reflect-ng-if": "false"
        }-->
  </div>