HTML字符串在javascript的帮助下删除多余的空格 [英] HTML string remove extra spaces with the help of javascript

问题描述

我有一个像

这样的 HTML 字符串

" <div> <p>您收到了来自项目 <p>测试正在进行中</p>

"

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

我需要<span field="template.variable.AlertName" class="fields">警报名称</span>

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

非常感谢任何帮助.

*仅限JAVASCRIPT

解决方案

使用正则表达式

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

用替换.

正则表达式将匹配

1. (<.*?>):HTML 标签并添加到第一个捕获组中($1 替换)
2. |:正则表达式中的或
3. \s+:或一个或多个空格

在替换中，检查它是否是 HTML 标记，否则替换多余的空格.

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

var html = ` <div><p>您收到了来自项目 <span class="fields" field="template.variable.ProjectName"> 的提醒.项目名称<br/></p><p><span field="template.variable.AlertName" class="fields">警报名称</span><span field="template.variable.AlertName" class="fields">警报名称</span><span field="template.variable.AlertName" class="fields">警报名称</span><br/></p><p>按照以下步骤访问警报:</p><ol><li>在 <span field="template.variable.AlertProjectLink" class="fields">Alert Project Link</span></li> 登录您的合同管理项目.<li>如有必要，请输入您在完成注册时创建的电子邮件地址和密码.</li><li>转到警报"选项卡以查看未读警报和文档的访问链接.</li></ol><p><span class="fields" field="template.variable.AlertDocumentList">警报文档列表</span></p><p>请不要回复此消息</p><p>.Space2 space gaurav 回复被路由到一个不受监控的邮箱.</p><p>如果您需要更多帮助，请联系 Merrill 技术支持，每周 7 天、每天 24 小时提供服务.</p><p><span class="template" field="template.variable.ImportTemplate" template="template.types.TechSupportContactInformation">技术支持联系信息</span>测试
<p>测试正在进行中</p>

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

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

解决方案

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

这篇关于HTML字符串在javascript的帮助下删除多余的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！