[monolithed]

Самый простой вариант:

<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>