Как применить стиль к одному какому-то символу?

Рейтинг: 1Ответов: 3Опубликовано: 13.06.2011

У меня есть следующий код:

<p>admin@site.ru<br>support@site.ru</p>

Как сделать так, чтобы собака(@) везде выделялась этим цветом #3A9ABE?

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 3Принят
<p>
admin<span class="dog">@</span>site.ru<br />
support<span class="dog">@</span>site.ru
</p>
<style type="text/css"> .dog { color: #3A9ABE; } </style>

UPD код рабочий, проверил. вместо "replaceDogs('footer')" можете вызывать несколько раз с вашими ID.

<html>
  <head>
  <!-- код head -->
    <script type="text/javascript">
    function replaceDogs(id) {
      var e = document.getElementById(id);
      e.innerHTML = e.innerHTML.split('@').join('<span style="color: #3A9ABE;">@</span>');
      }
    if (document.all) {
      document.onreadystatechange = function() {
        if (document.readyState != 'complete') return false;
        replaceDogs('footer');
        }
      } else window.onload = function() {
        replaceDogs('footer');
        }
    </script>
  </head>
  <body>
    <!-- код сайта -->
    <div id="footer">admin@site.ru</div>
  </body>
</html>
▲ 2
var a = document.getElementsByTagName('*'), i = 0;
while(a[i])
{
    if(/([a-zA-Z0-9-.])@([a-zA-Z0-9-.])/.test(a[i].innerHTML))
        a[i].innerHTML = a[i].innerHTML.replace(/([a-zA-Z0-9-.])@([a-zA-Z0-9-.])/g, '$1<span class="dog">@</span>$2');
    ++i;
}

Вот так собачка ловится только в мыльниках.

▲ 1

Тут я вижу выход только в том, чтобы написать JavaScript-код для страницы. Он должен будет находить все символы "@" и применять к ним стиль. А именно, заносить в тег.
Как вариант конкретной реализации, могу предложить пользоваться jQuery.

var originalText = $("#div_id").text();// Берем текст из элемента, в котором надо 
//выделить все собаки синим.
//
/*
Далее Вам надо написать скрипт, который находит в originalText символы 
"@" и меняет его на <span class="dog">@</span>. В JavaScript есть какая-то функция,
которая находит и заменяет один текст на другой.
*/
//Затем
$("#div_id").text(newText);