Как заменить слово в эелементе
 

Добрый день! Подскажите пожалуйста, как в данном примере можно заменить слова "Категория:", "Опубликовано:", "Просмотров:" на тег <i class="fa fa-icon-star"></i>

<div id="ShedowFone">
	<dl class="article-info muted">
	
		<dd class="category-name">
			Категория: <a itemprop="genre" href="/index.php/nastrojka">Система \ Настройка</a>
		</dd>
		
		<dd class="published">
			<time itemprop="datePublished"> Опубликовано: 18 Август 2015 </time>
		</dd>

		<dd class="hits">
			<meta content="UserPage"> Просмотров: 117
		</dd>
	</dl>
</div>

т.е. интересует вот такой результат:

<div id="ShedowFone">
	<dl class="article-info muted">
	
		<dd class="category-name">
			<i class="fa fa-icon-star"></i><a itemprop="genre" href="/index.php/nastrojka">Система \ Настройка</a>
		</dd>
		
		<dd class="published">
			<time itemprop="datePublished"> <i class="fa fa-icon-star"></i> 18 Август 2015 </time>
		</dd>
		
		<dd class="hits">
			<meta content="UserPage"><i class="fa fa-icon-star"></i> 117
		</dd>
	</dl>
</div>

Никак не могу придумать метод... =( порадуйте меня пожалуйста)

Как вариант...

<div id="ShedowFone">
	<dl class="article-info muted">
		<dd class="category-name">
			Категория: <a itemprop="genre" href="/index.php/nastrojka">Система \ Настройка</a>
		</dd>
		<dd class="published">
			<time itemprop="datePublished"> Опубликовано: 18 Август 2015 </time>
		</dd>
		<dd class="hits">
			<meta content="UserPage"> Просмотров: 117
		</dd>
	</dl>
</div>
<script type='text/javascript'>
	var re=/((Категория)|(Опубликовано)|(Просмотров)):/g;
	var o=document.getElementById('ShedowFone');
	o.innerHTML=o.innerHTML.replace(re,'<i class="fa fa-icon-star"></i>');
</script>

Ksa, благодарю! Пошёл тетстить

скобочки внутри зачем?

Я думал, что вертикальная палка распространяется на один символ.