HTML 字符串在 javascript 的帮助下删除多余的空格

Question

嗨，我有一个 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>   "

我需要用单个 Space 替换所有连续的空格，但不是在标签内，就像你看到的那样，我有 <span field ="template.variable.AlertName" class="fields"> Alert Name</span>

我需要<span field="template.variable.AlertName" class="fields">Alert Name</span>

如您所见，我不想触及 HTML 标签属性的空格。

非常感谢任何帮助。

*JAVASCRIPT 仅

Answer 1

使用正则表达式

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

与 replace.

正则表达式将匹配

1. (<.*?>): HTML 标记并将其添加到第一个捕获组中（</code> 替换）</li> <li><code>|：或在正则表达式中
2. \s+: 或一个或多个空格

替换时，检查是否是HTML标签，否则，替换多余的空格。

</code> 是第一个捕获的组，即 HTML 标签。如果存在标签，则什么也不做，否则删除多余的空格。</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre><code>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, ) => ? : ' '); console.log(res);