Introduction

I have recently been attempting to work with a list in SharePoint 2007 that had several multi-select lookup columns. Unfortunately the Display Form view of these lists is not easy to read. The items are listed next to each other with a ; (semicolon) between them. For example:

Item Label

Item 1; Item 2; Item 3

I wanted to get these to display in a list format for readability and to achieve this, I tried working with the SharePoint XSL Templates on CodePlex. There are several templates in this package that should have been able to make this transformation; however, due mostly to my lack of experience in dealing with XSL, I failed to get them to work.

While not particularly strong with JavaScript or JQuery, I wanted to attempt to make this modification with a few lines of JavaScript to basically find the semicolon and replace it with a line break. I ended up with the code below that I placed in a Content Editor Web Part that was placed below the list on a Web Part page:

<script language="javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript">
function injectStyles(rule) {
var div = $("<div />", {
html: '&shy;<style>' + rule + '</style>'
}).appendTo("body");
}
document.body.innerHTML = document.body.innerHTML.replace(/<\s*[\/]?A\s*[\/]?>;/gi, '<br />');
injectStyles('.ms-stylelabel { vertical-align:text-top; }');
</script>

This achieved the effect I was looking for, the key to the list modification is:

document.body.innerHTML = document.body.innerHTML.replace(/<\s*[\/]?A\s*[\/]?>;/gi, '<br />');

Which looks for the trailing end of the list item link and the semicolon and then replaces it with a line break tag. The difficulty was figuring out the regex expression to use to find this tag. The injectStyles function is included to move the list labels to the top of the cell to align with the list. I did quite a bit of Google-Fu to piece this together but some of the useful links are listed below:

Modifying SharePoint 2007 Web Part Pages with JavaScript