HTML-ifying Text in SharePoint
This has probably been done to death, but here’s my version of how to “HTML-ify” HTML text in SharePoint calculated fields into rendered HTML using jQuery:
|
1 2 3 4 5 6 7 8 9 10 11 |
<span style="font-family: Lucida Console,monospace;"><span style="color: #4d70ea;">var </span><span style="color: #e87400;">htmlPattern = /[^<]*<([^ ]+)[^<]+<\/\1>.*/;</span> <span style="color: #4d70ea;">var </span><span style="color: #e87400;">ltPattern = /&lt;/g;</span> <span style="color: #4d70ea;">var </span><span style="color: #e87400;">gtPattern = /&gt;/g;</span></span> <span style="font-family: Lucida Console,monospace;"><span style="color: #e87400;">$(selectors).each(</span><span style="color: #4d70ea;">function</span><span style="color: #e87400;">(index, item){</span> <span style="color: #4d70ea;">var </span><span style="color: #e87400;">html = $(item).html().replace(ltPattern, </span><span style="color: #a56dbc;">"<"</span><span style="color: #e87400;">).replace(gtPattern, </span><span style="color: #a56dbc;">">"</span><span style="color: #e87400;">);</span></span> <span style="font-family: Lucida Console,monospace;"> <span style="color: #4d70ea;">if</span><span style="color: #e87400;">(!htmlPattern.test(html)) { </span><span style="color: #4d70ea;">return</span><span style="color: #e87400;">; }</span></span> <span style="font-family: Lucida Console,monospace;"> <span style="color: #e87400;">$(item).html(html);</span> <span style="color: #e87400;">});</span></span> |
Perhaps the most interesting part of this script is the regular expression used to capture the HTML tag. Unlike other versions I’ve seen, it easily handles any HTML tag and will match-and-replace even elements that don’t start and end with HTML tags (your content can have leading and trailing text or other HTML). This is exceedingly useful if your calculated field contains textual content or if you need to HTML-ify some string that is rendered in say the newsletter list style.
Specify your selectors wisely to minimize the number of elements to scan.
Here it is again in a “best practices” format hooked up to a simple namespace:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<FONT FACE="Lucida Console,monospace"><FONT COLOR="#1b61d6"><!DOCTYPE </FONT><FONT COLOR="#ff0000">html PUBLIC </FONT><FONT COLOR="#000000">"</FONT><FONT COLOR="#ff0000">-</FONT><FONT COLOR="#000000">//</FONT><FONT COLOR="#ff0000">W3C</FONT><FONT COLOR="#000000">//</FONT><FONT COLOR="#ff0000">DTD XHTML 1</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#ff0000">0 Transitional</FONT><FONT COLOR="#000000">//</FONT><FONT COLOR="#ff0000">EN</FONT><FONT COLOR="#000000">"</FONT> <FONT COLOR="#000000">"</FONT><FONT COLOR="#ff0000">http:</FONT><FONT COLOR="#000000">//</FONT><FONT COLOR="#ff0000">www</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#ff0000">w3</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#ff0000">org</FONT><FONT COLOR="#000000">/</FONT><FONT COLOR="#ff0000">TR</FONT><FONT COLOR="#000000">/</FONT><FONT COLOR="#ff0000">xhtml1</FONT><FONT COLOR="#000000">/</FONT><FONT COLOR="#ff0000">DTD</FONT><FONT COLOR="#000000">/</FONT><FONT COLOR="#ff0000">xhtml1-transitional</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#ff0000">dtd</FONT><FONT COLOR="#000000">"</FONT><FONT COLOR="#1b61d6">></FONT> <FONT COLOR="#1b61d6"><html </FONT><FONT COLOR="#ff0000">xmlns</FONT><FONT COLOR="#1b61d6">=</FONT><FONT COLOR="#2c7e30">"http://www.w3.org/1999/xhtml"</FONT><FONT COLOR="#1b61d6">></FONT> <FONT COLOR="#000000"> </FONT><FONT COLOR="#1b61d6"><head></FONT> <FONT COLOR="#000000"> </FONT><FONT COLOR="#1b61d6"><title></FONT><FONT COLOR="#000000"> Sample HTMLIFY </FONT><FONT COLOR="#1b61d6"></title></FONT> <FONT COLOR="#000000"> </FONT><FONT COLOR="#1b61d6"><script </FONT><FONT COLOR="#5ca2c2">type</FONT><FONT COLOR="#1b61d6">=</FONT><FONT COLOR="#2c7e30">"text/javascript"</FONT> <FONT COLOR="#5ca2c2">src</FONT><FONT COLOR="#1b61d6">=</FONT><FONT COLOR="#2c7e30">"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"</FONT><FONT COLOR="#1b61d6">></script></FONT> <FONT COLOR="#000000"> </FONT><FONT COLOR="#1b61d6"><script </FONT><FONT COLOR="#5ca2c2">type</FONT><FONT COLOR="#1b61d6">=</FONT><FONT COLOR="#2c7e30">"text/javascript"</FONT><FONT COLOR="#1b61d6">></FONT> <FONT COLOR="#008000">// Create a simple namespace.</FONT> <FONT COLOR="#4d70ea">var </FONT><FONT COLOR="#e87400">my = {};</FONT> <FONT COLOR="#008000">// Define the util class.</FONT> <FONT COLOR="#4d70ea">function </FONT><FONT COLOR="#e87400">util() {</FONT> <FONT COLOR="#4d70ea">var </FONT><FONT COLOR="#e87400">htmlPattern = /[^<]*<([^ ]+)[^<]+<\/\1>.*/;</FONT> <FONT COLOR="#4d70ea">var </FONT><FONT COLOR="#e87400">ltPattern = /&lt;/g;</FONT> <FONT COLOR="#4d70ea">var </FONT><FONT COLOR="#e87400">gtPattern = /&gt;/g;</FONT> <FONT COLOR="#4d70ea">return </FONT><FONT COLOR="#e87400">{</FONT> <FONT COLOR="#008000">// The main function which takes a set of jQuery selectors.</FONT> <FONT COLOR="#e87400">htmlify: </FONT><FONT COLOR="#4d70ea">function</FONT><FONT COLOR="#e87400">(selectors) {</FONT> <FONT COLOR="#e87400">$(selectors).each(</FONT><FONT COLOR="#4d70ea">function</FONT><FONT COLOR="#e87400">(index, item){</FONT> <FONT COLOR="#4d70ea">var </FONT><FONT COLOR="#e87400">html = $(item).html()</FONT> <FONT COLOR="#e87400">.replace(ltPattern, </FONT><FONT COLOR="#a56dbc">"<"</FONT><FONT COLOR="#e87400">)</FONT> <FONT COLOR="#e87400">.replace(gtPattern, </FONT><FONT COLOR="#a56dbc">">"</FONT><FONT COLOR="#e87400">);</FONT> <FONT COLOR="#4d70ea">if</FONT><FONT COLOR="#e87400">(!htmlPattern.test(html)) { </FONT><FONT COLOR="#4d70ea">return</FONT><FONT COLOR="#e87400">; }</FONT> <FONT COLOR="#e87400">$(item).html(html);</FONT> <FONT COLOR="#e87400">});</FONT> <FONT COLOR="#e87400">}</FONT> <FONT COLOR="#e87400">}</FONT> <FONT COLOR="#e87400">}</FONT> <FONT COLOR="#008000">// Instantiate the object.</FONT> <FONT COLOR="#e87400">my.util = </FONT><FONT COLOR="#4d70ea">new </FONT><FONT COLOR="#e87400">util();</FONT> <FONT COLOR="#008000">// Convert to rendered HTML</FONT> <FONT COLOR="#e87400">$(</FONT><FONT COLOR="#ff0000">document</FONT><FONT COLOR="#e87400">).ready(</FONT><FONT COLOR="#4d70ea">function</FONT><FONT COLOR="#e87400">() {</FONT> <FONT COLOR="#e87400">my.util.htmlify(</FONT><FONT COLOR="#a56dbc">".text1, .text2"</FONT><FONT COLOR="#e87400">);</FONT> <FONT COLOR="#e87400">});</FONT> <FONT COLOR="#1b61d6"></script></FONT> <FONT COLOR="#000000"> </FONT><FONT COLOR="#1b61d6"></head></FONT> <FONT COLOR="#000000"> </FONT><FONT COLOR="#1b61d6"><body></FONT> <FONT COLOR="#000000"> </FONT><FONT COLOR="#1b61d6"><div </FONT><FONT COLOR="#5ca2c2">class</FONT><FONT COLOR="#1b61d6">=</FONT><FONT COLOR="#2c7e30">"text1"</FONT><FONT COLOR="#1b61d6">></FONT><FONT COLOR="#000000">This is some HTML text </FONT><FONT COLOR="#02755e">&lt;</FONT><FONT COLOR="#000000">a href=""</FONT><FONT COLOR="#02755e">&gt;</FONT><FONT COLOR="#000000">a link</FONT><FONT COLOR="#02755e">&lt;</FONT><FONT COLOR="#000000">/a</FONT><FONT COLOR="#02755e">&gt;</FONT><FONT COLOR="#1b61d6"></div></FONT> <FONT COLOR="#000000"> </FONT><FONT COLOR="#1b61d6"><div </FONT><FONT COLOR="#5ca2c2">class</FONT><FONT COLOR="#1b61d6">=</FONT><FONT COLOR="#2c7e30">"text2"</FONT><FONT COLOR="#1b61d6">></FONT><FONT COLOR="#000000">This is some HTML text </FONT><FONT COLOR="#02755e">&lt;</FONT><FONT COLOR="#000000">a href=""</FONT><FONT COLOR="#02755e">&gt;</FONT><FONT COLOR="#000000">a link</FONT><FONT COLOR="#02755e">&lt;</FONT><FONT COLOR="#000000">/a</FONT><FONT COLOR="#02755e">&gt;</FONT><FONT COLOR="#000000"> </FONT> <FONT COLOR="#000000"> </FONT><FONT COLOR="#1b61d6"><span </FONT><FONT COLOR="#5ca2c2">style</FONT><FONT COLOR="#1b61d6">=</FONT><FONT COLOR="#2c7e30">"background:green"</FONT><FONT COLOR="#1b61d6">></FONT><FONT COLOR="#000000">This text is in a span</FONT><FONT COLOR="#1b61d6"></span></div></FONT> <FONT COLOR="#000000"> </FONT><FONT COLOR="#1b61d6"><div </FONT><FONT COLOR="#5ca2c2">class</FONT><FONT COLOR="#1b61d6">=</FONT><FONT COLOR="#2c7e30">"text2"</FONT><FONT COLOR="#1b61d6">></FONT><FONT COLOR="#000000">This is some HTML text </FONT><FONT COLOR="#02755e">&lt;</FONT><FONT COLOR="#000000">span style="background:red"</FONT><FONT COLOR="#02755e">&gt;</FONT><FONT COLOR="#000000">some text</FONT><FONT COLOR="#02755e">&lt;</FONT><FONT COLOR="#000000">/span</FONT><FONT COLOR="#02755e">&gt;</FONT><FONT COLOR="#1b61d6"></div></FONT> <FONT COLOR="#000000"> </FONT><FONT COLOR="#1b61d6"></body></FONT> <FONT COLOR="#1b61d6"></html></FONT></FONT> |
You should be able to copy/paste that and run it.
