Encase <a href="mailto"></a> links in javascript

Joel Trauger's Avatar

Joel Trauger

04 Jun, 2014 04:11 PM

I'm looking for a way to encase mailto links in javascript. This script will look like:

<script type="text/javascript">// <![CDATA[
name=('admissions')
email=('admissions@' + 'hsu.edu')
document.write('<A href="mailto:' + email + '">' + name + '</a>')
// ]]></script>
<!--The script on this page is to help protect against spam-->

Which can be generated manually, but I would like my pages on my site to be easily editable by other by just editing a hyperlink instead of breaking out the HTML editor and changing the javascript. The majority of users on my site will not be able to edit the HTML code directly anyway.

  1. 1 Posted by Joel Trauger on 04 Jun, 2014 04:13 PM

    Joel Trauger's Avatar

    I should note that I can select the <a> nodes and get the name and whatnot, but I am at a loss what to do next to pick out the email address from the mailto link.

  2. 2 Posted by Ryan Griffith on 04 Jun, 2014 05:55 PM

    Ryan Griffith's Avatar

    Hi Joel,

    Just to clarify, are you looking to allow your users to enter something like ***@*** as plain text within a WYSIWYG (or text field) and then have Cascade Server replace the text with your <script> tag and build the actual <a> dynamically?

    Please let me know if I am on the right track here.

    Thanks!

  3. 3 Posted by Joel Trauger on 04 Jun, 2014 06:36 PM

    Joel Trauger's Avatar

    I was thinking that they would use the "Insert/Edit Link" button on the WYSIWYG editor to create, in the xml, <a href="***@***">Name of person</a> and have the Velocity code pick that apart and transform it into this:

    <script type="text/javascript">// <![CDATA[
    name=('Person's ' + 'Name ' + 'Here')
    email=('address@' + 'company.com')
    document.write('<A href="mailto:' + email + '">' + name + '</a>')
    // ]]></script>
    <!--The script on this page is to help protect against spam-->
    

    If this is not possible, but something else is, please advise.

  4. 4 Posted by Ryan Griffith on 04 Jun, 2014 06:57 PM

    Ryan Griffith's Avatar

    Thank you for the clarification, Joel.

    Based on your description, I believe it may be more beneficial to use an XSLT Format that is applied to the Configuration Set or Template. Because these Formats are applied during the final stages of page rendering, this Format would be able to essentially transform ALL <a> tags containing mailto: within the href attribute on the rendered page.

    Let me see if I work on some sample code for you to try out.

    Please let me know if you have any questions.

    Thanks!

  5. 5 Posted by Ryan Griffith on 04 Jun, 2014 07:31 PM

    Ryan Griffith's Avatar

    Hi Joel,

    When you have a moment, try attaching the following XSLT Format to either your Page's Output, Configuration Set, or Template and let me know how it works out for you.

    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns:xhtml="http://www.w3.org/1999/xhtml">
    
      <!-- This template will replace an email link with JavaScript. -->
      <xsl:template match="xhtml:a[contains(@href, 'mailto:')]|a[contains(@href, 'mailto:')]">
        <xsl:variable name="email" select="substring-after(@href, 'mailto:')"/>
        <xsl:variable name="emailLocal" select="substring-before($email, '@')"/>
        <xsl:variable name="emailDomain" select="substring-after($email, '@')"/>
        <script type="text/javascript"><xsl:comment>#protect
            var e = ['<xsl:value-of select="$emailLocal"/>','<xsl:value-of select="$emailDomain"/>'];
            document.write('&lt;a href="mailto:' + e.join("@") + '"&gt;' + '<xsl:value-of select="."/>' + '&lt;/a&gt;');
        #protect</xsl:comment></script>
        <xsl:comment>The script on this page is to help protect against spam</xsl:comment>
      </xsl:template>
    
      <xsl:template match="@*|node()">
        <xsl:copy>
          <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
      </xsl:template>
    
      <xsl:template match="xhtml:head|head">
        <xsl:copy>
          <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
      </xsl:template>
      
    </xsl:stylesheet>
    

    Please let me know if you have any questions.

    Thanks!

  6. 6 Posted by Joel Trauger on 04 Jun, 2014 07:35 PM

    Joel Trauger's Avatar

    I will try this and report back if it works like I intended.

  7. 7 Posted by Joel Trauger on 04 Jun, 2014 07:55 PM

    Joel Trauger's Avatar

    It works amazingly well.

    There are a few slight tweaks I'd like to perform so the end result looks better on our page code, but other than that, this is exactly what I needed.

    Thanks so much for your help!

  8. 8 Posted by Ryan Griffith on 04 Jun, 2014 08:05 PM

    Ryan Griffith's Avatar

    Thank you for following up, Hank. I am glad to hear the XSLT Format did the trick.

    I'm going to go ahead and close this discussion, please feel free to comment or reply to re-open if you have any additional questions.

    Have a great day!

  9. Ryan Griffith closed this discussion on 04 Jun, 2014 08:05 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac