首页 > 解决方案 > How can i get link from MSO code via javascript

问题描述

I have lots of links in my code. I got all links from code but which links are presented in the MSO code I didn't get those links. In MSO code there is no <a> tag that's why it's hard for me to select the link. I have tried with document.querySelectorAll("[href]");. It's not working. Can anyone please help me here that how can I get links from MSO code

let links = document.querySelectorAll("[href]");

for(let link of links)
{
  let curhref = link.href;
  if(curhref.indexOf('http') > -1)
  {
    link.href = curhref.replace(/(\?|&)elqTrackId=[a-z0-9]+(&elqTrack=true)?/, '');
    if(link.href.indexOf('ea=') > -1)
    {
      link.href += '&utm_source=iconnect&utm_medium=email&utm_campaign={{Approved_Document_vod__c.Vault_Document_ID_vod__c}}&emailId={{Approved_Document_vod__c.Vault_Document_ID_vod__c}}&codsId={{Account.CODS_External_Id__c}}&utm_term=';
    }
    else
    {
      link.href += '?utm_source=iconnect&utm_medium=email&utm_campaign={{Approved_Document_vod__c.Vault_Document_ID_vod__c}}&emailId={{Approved_Document_vod__c.Vault_Document_ID_vod__c}}&codsId={{Account.CODS_External_Id__c}}&utm_term=';
    }
  }
}
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #f4f4f4; width: 100% !important;">
  <center style="width: 100% !important; background-color: #f4f4f4;">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f4f4f4" style="width:100% !important;">
      <tbody><tr>
        <td align="center" valign="top" class="">
          <table class="container" cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff" style="margin: 0 auto;">
            <!-- TEXT HEADER SECTION STARTS -->
            <tbody>

              <tr>
                <td bgcolor="#ffffff" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 20px; margin: 0; padding: 0; padding: 10px; text-align: left; vertical-align: top; word-spacing: 2px; border: 2px solid #4089c3;">
                  <a href="https://www.google.com/dummy0?ea=8mYoHZtET8c&elqTrackId=a3a008f9213248fe8bb899351706a6ad">Lorem Ipsum</a> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the <a href="mailto:dummy@gmail.com">industry's</a> standard dummy text ever since the 1500s, when an unknown printer took a galley of type <a href="tel:012414 258">and</a> scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="http://www.google.com/dummy1?elqTrackId=2cdd5998b5024a23b2d21839786d24a8&elqTrack=true">electronic</a> typesetting, <a href="http://www.google.com/dummy2&elqTrackId=2cdd5998b5024a23b2d21839786d24a8&elqTrack=true">remaining</a> essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently <a href="http://www.google.com/dumm3">with</a> desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </td>
              </tr>
              <tr>
		      <td align="center" style="border-radius: 2px;padding-bottom: 15px;padding-top: 15px" class="space-change">
		         <table border="0" cellspacing="0" cellpadding="0" width="">
		          <tbody>
		            <tr>
		              <td valign="middle" bgcolor="#449E9A" align="center" class="" style="line-height: normal; vertical-align: middle;">
		                  <!--[if mso]>
		                  <v:rect xmlns:v="urn:schemas-microsoft-com:vml"
		                    xmlns:w="urn:schemas-microsoft-com:office:word"
		                    href="http://images.inform.janssen-emea.com/Web/JanssenPharmaceutica/{fa93572c-25a0-491c-bdd6-b777323d4b2f}_The_Clayton_Hotel__Limerick.ics"
		                    style="height:40px; v-text-anchor:middle; width:262px; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; line-height: 39px;"
		                    stroke="f" fillcolor="#449E9A">
		                    <w:anchorlock/>
		                    <center>
		                  <![endif]-->
		                  <a href="http://images.inform.janssen-emea.com/Web/JanssenPharmaceutica/{fa93572c-25a0-491c-bdd6-b777323d4b2f}_The_Clayton_Hotel__Limerick.ics?elqTrackId=48cc95382bb74867af4281dff7ffa583" target="_blank" style="font-size: 14px; font-family: 'Verdana',Helvetica, Arial, sans-serif; font-weight: bold; color: #ffffff; text-decoration: none; display: inline-block; width: 262px; height: 40px; vertical-align: middle; line-height: 39px;" class="mobile-button mobile-width">
		                    ADD TO CALENDAR
		                  </a>
		                  <!--[if mso]>
		                  </center>
		                  </v:rect>
		                  <![endif]-->
		                </td>
		            </tr>
		          </tbody>
		        </table>
		      </td>
		    </tr>
          </tbody></table>
        </td>
      </tr>
    </tbody></table>
  </center>

</body></html>

标签: javascripthtml

解决方案


你是说里面的碎片<!--[if mso]…… [endif]-->

在 HTML 中,<!--开始一个注释块

-->结束一个评论块。

这些标签中的任何内容都被视为注释,并且不是 DOM 的一部分,因此 JavaScript 看不到它。

一些额外的背景:<!--[if mso]...[endif]-->语法是 Microsoft 特定的代码,称为条件注释。呈现 HTML 的 Microsoft 应用程序(包括 Internet Explorer 和 Outlook)可以读取这些并将它们解释为代码,然后,如果满足条件,会将这些块之间的内容呈现到 DOM 中。但是,对于所有其他浏览器/渲染器来说,除了标准的注释标签之外,它们毫无意义,因此被视为注释。即使在 Microsoft 应用程序中,条件注释现在也是一项遗留功能,随着渲染引擎获得对 Web 标准的更好支持,它的必要性越来越少。

在这种情况下,mso指的是 Microsoft Outlook,因此只有在 Outlook 中查看 HTML 时才会呈现此内容。


推荐阅读