Самый простой вариант:
<p id="text">text</p>
<script>
var text = document.getElementById('text');
text.innerHTML = text.innerHTML.replace(/^.|.$/g, '<span style="color:red;">$&</span>');
</script>
Без регулярных выражений:
<p id="text">text</p>
<script>
var elem = document.getElementById('text'),
text = elem.innerHTML,
span = ['<span style="color:red;">', '</span>'];
elem.innerHTML = span[0] + text.charAt(0) + span[1] + text.slice(1, -1) + span[0] + text.slice(-1) + span[1];
</script>
