HTML字符串借助javascript删除多余的空格

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 ie 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);