Автоподсветка тэгов в тексте на javascript

Возникла задача. Требуется автоматически в тексте подсвечивать введенные пользователем тэги, т.е. текст вида #xxxx .

Решить данную задачу можно с помощью регулярных выражений на javascript.

Решение:

<style>
.hash_tag { color: #84A432; text-decoration: none; }
</style>
<script type="text/javascript">
var mydiv = $(‘#div’);
var text = mydiv.html();
text = text.replace( /[\s|&nbsp;](#.+?)(?=\s|&nbsp;)/g,
'<span class="hash_tag">$1</span>' );
mydiv.html(text);
</script>

 

где,

  • [\s|&nbsp;] — означает, что перед выражением должен быть или пробел, или со знака неразрывного пробела;
  • (?=\s|&nbsp;|,|\.) — за нашим тегом следует пробел, неразрывный пробел, запятая или точка;
  • (#.+?) — текст нашего тега, который начинается с символа #;
  • <span class=»hash_tag» >$1</span> — html тэги в которые мы оборачиваем найденный тэги;
  • g — окружить все найденные теги.

Пример использования можно видеть тут.

Данные возможности можно использовать для автоподсветки вводимых сообщений пользователя.

Добавить комментарий

Ваш адрес email не будет опубликован.