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>商標 ™</p> <p>コピーライト ©</p> <p>ハート ♥</p>
via
http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
http://forrst.com/posts/Styling_HTML_Entities-s0Q