特定の文字だけスタイリングする

Ads

Result

jQuery

/*

highlight v3

Highlights arbitrary terms.

<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>

MIT license.

Johann Burkard
<http://johannburkard.de>
<mailto:jb@eaio.com>

*/

jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
  var skip = 0;
  if (node.nodeType == 3) {
   var pos = node.data.toUpperCase().indexOf(pat);
   if (pos >= 0) {
//文字をspanで囲んでclass付与
    var spannode = document.createElement('span');
    spannode.className = 'highlight';
    var middlebit = node.splitText(pos);
    var endbit = middlebit.splitText(pat.length);
    var middleclone = middlebit.cloneNode(true);
    spannode.appendChild(middleclone);
    middlebit.parentNode.replaceChild(spannode, middlebit);
    skip = 1;
   }
  }
  else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
   for (var i = 0; i < node.childNodes.length; ++i) {
    i += innerHighlight(node.childNodes[i], pat);
   }
  }
  return skip;
 }
 return this.each(function() {
  innerHighlight(this, pat.toUpperCase());
 });
};
//文字を指定して再度class付与
$(function() {
    $('body').highlight("™");
    $('span.highlight:contains("™")').addClass("trade");
    $('body').highlight("©");
    $('span.highlight:contains("©")').addClass("copyright");
    $('body').highlight("♥");
    $('span.highlight:contains("♥")').addClass("heart");
    $('body').highlight("&");
    $('span.highlight:contains("&")').addClass("ampersand");
});

css

.highlight.trade {
    font-family: Georgia, serif;
    color: blue; }

.highlight.copyright { 
    font-family: Georgia, serif;
    color: red; }

.highlight.heart {
    color: green; }

html

<p>商標 &trade;</p>

<p>コピーライト &copy;</p>

<p>ハート &hearts;</p>

via

http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
http://forrst.com/posts/Styling_HTML_Entities-s0Q

タイトルとURLをコピーしました