0

I have a problem with a Google Font. I implemented a Google Font into my website. Now the thing is, that the "&" sign looks really strange. So I'd like to use a different font only for the "&" character. I think something like this should work:

<p>hello <span class="otherfont">&</span> good bye</p>

No I wanted to search the page for the "&" and wrap it with the span. My first thought was $('#main-content').find('&').wrap('<span></span>');. But of course this woun't work..

Does anybody have an idea? If not in JS/Jquery maybe in php? Thanks!

Nico Martin
  • 1,268
  • 1
  • 14
  • 23
  • 2
    See this answer http://stackoverflow.com/questions/9794851/find-text-string-in-jquery-and-make-it-bold/9795091#9795091 – elclanrs May 05 '14 at 08:11

1 Answers1

0
var mainContent = $('#mainContent').text();
var newContent = mainContent.replace(/&/g, '<span class="otherfont">&</span>');
$('#mainContent').html(newContent);

http://jsfiddle.net/w4DhR/1/

UPDATE: To make use of html() in stead of text(); rewrite the & symbol to &amp;

var newContent = mainContent.replace(/&amp;/g, '<span class="otherfont">&amp;</span>');

http://jsfiddle.net/w4DhR/3/

timo
  • 2,119
  • 1
  • 24
  • 40
  • Thanks! I had to change one thing. It deleted all my html. It works like this `var mainContent = $('#main-content').html();` But now it add a `amp;` right after the new span. Do you know why? – Nico Martin May 05 '14 at 09:44
  • Most `amp;` is HTML for the & synbol. So it probably has some issues with the fact that I look for & using the exact symbol. I'll try and update the code. – timo May 05 '14 at 09:50
  • @NicoHöckel Change the selector to `var newContent = mainContent.replace(/&/g, '&');` I'll update the code – timo May 05 '14 at 09:52
  • Now another problem appeared. It does change all the `&` but all the other JS doesn't work anymore. Any guess? – Nico Martin May 05 '14 at 12:15
  • I have no idea what your other JS consists of, nor what error it returns. So no, no guess =). – timo May 05 '14 at 12:20
  • Thats the problem. There are no warnings or errors. I'm working with jquery lazyload those events are of course after the document.ready. Without your script the ` – Nico Martin May 05 '14 at 12:55