Extract text from the html using jQuery [closed]

I have html as follows

<div class="chart-component-header">
  <div class="template-block-header" contenteditable="false"><span><span class="collapse-icon open" data-action="collapse" title="Collapse section" contenteditable="false"></span><span class="template-block-title" contenteditable="false">Allergies</span></span>
    <ul class="template-block-toolbar">
      <li><span class="up up-icon grayOut" data-action="up" title="Move up" contenteditable="false"></span></li>
      <li><span class="down down-icon grayOut" data-action="down" title="Move down" contenteditable="false"></span></li>
      <li><span class="delete delete-icon" data-action="delete" title="Delete" contenteditable="false"></span></li>
    </ul>
  </div>
</div>

I want to extract Allergies from the span using jQuery or JS. While I was using

$(this).text();

It was returning AllergiesAllergies

Answer

Using this you can get the actual header value which you want

JQUERY

$("div.chart-component-body span.section-header").html();

JS

document.querySelector(".chart-component-body .section-header").innerHTML;