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>   "

我需要用单个空格而不是标签内的所有连续空格替换，就像你可以看到我有<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 标记并将其添加到第一个捕获组中（$1 替换）
2. |: 正则表达式中的或
3. \s+: 或者一个或多个空格

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

$1 是第一个捕获的组，即 HTML 标记。如果存在标签，则不执行任何操作，否则删除多余的空格。

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