Remove extra spaces only between tags in an HTML string

Question

Hi I have a HTML string like

 "     <div>       <p>You have received an alert from         project <span class='fields'          field='template.variable.ProjectName'>          Project Name</span>        <br />       </p>        <p>        <span          field='template.variable.AlertName'          class='fields'>Alert Name</span> <span          field='template.variable.AlertName'          class='fields'>Alert Name</span> <span          field='template.variable.AlertName'          class='fields'>Alert Name</span>        <br />       </p>        <p>Follow these steps to access the      alert:</p>        <ol>         <li>Log into your  for          Contract Management project         at <span            field='template.variable.AlertProjectLink'            class='fields'>Alert Project Link</span></li>          <li>If necessary, enter your email address and the password          that you created when you completed your         registration.</li>          <li>Go to the Alerts tab to see your          unread alerts and         access links to the documents.</li>      </ol>        <p>        <span class='fields'          field='template.variable.AlertDocumentList'>          Alert Document List</span></p>        <p>Please do not reply        to this message</p>        <p>.Space2 space gaurav Replies are        routed to an unmonitored       mailbox.</p>        <p>If you        would like additional assistance, please contact       Merrill        Technical Support, available 24 hours a day, seven       days a      week.</p>        <p>        <span class='template'          field='template.variable.ImportTemplate'          template='template.types.TechSupportContactInformation'>          Tech Support Contact Information</span> test</p>        <p>Testing is going on</p>     </div>   "

I need to replace all the consecutive spaces with single Space but not within tags, Like you can see that I Have

`<span field ="template.variable.AlertName"          class="fields">   Alert Name</span>`

I need:

`<span          field="template.variable.AlertName"          class="fields">Alert Name</span>`

As you can see that I don't want to touch spaces of the attributes of HTML tag.

Any help would be highly Appreciated Thanks.

*JAVASCRIPT ONLY

Answer 1

Use the regex

/(<.*?>)|\s+/g

with replace.

The regex will match

1. (<.*?>): HTML tag and add it in first capturing group($1 in replace)
2. |: OR in regex
3. \s+: Or one or more spaces

In replacement, check if it is HTML tag else, replace extra spaces.

$1 is first captured group i.e. HTML tag. If tag is present, then don't do anything, else remove the extra spaces.

var html = `     <div>       <p>You have received an alert from         project <span class="fields"          field="template.variable.ProjectName">          Project Name</span>        <br />       </p>        <p>        <span          field="template.variable.AlertName"          class="fields">Alert Name</span> <span          field="template.variable.AlertName"          class="fields">Alert Name</span> <span          field="template.variable.AlertName"          class="fields">Alert Name</span>        <br />       </p>        <p>Follow these steps to access the      alert:</p>        <ol>         <li>Log into your  for          Contract Management project         at <span            field="template.variable.AlertProjectLink"            class="fields">Alert Project Link</span></li>          <li>If necessary, enter your email address and the password          that you created when you completed your         registration.</li>          <li>Go to the Alerts tab to see your          unread alerts and         access links to the documents.</li>      </ol>        <p>        <span class="fields"          field="template.variable.AlertDocumentList">          Alert Document List</span></p>        <p>Please do not reply        to this message</p>        <p>.Space2 space gaurav Replies are        routed to an unmonitored       mailbox.</p>        <p>If you        would like additional assistance, please contact       Merrill        Technical Support, available 24 hours a day, seven       days a      week.</p>        <p>        <span class="template"          field="template.variable.ImportTemplate"          template="template.types.TechSupportContactInformation">          Tech Support Contact Information</span> test</p>        <p>Testing is going on</p>     </div>   `;

var res = html.replace(/(<.*?>)|\s+/g, (m, $1) => $1 ? $1 : ' ');
console.log(res);