모든 문자열의 스타일 변경

브랜딩상의 이유로 사이트 제목이 제목에 나타날 때마다 나머지 콘텐츠의 고유 한 글꼴로 표시되도록하고 싶습니다. 단순함을 위해 제 특수 서체는 Courier이고 내 회사는 SparklePony입니다. 그래서, 라인처럼,모든 문자열의 스타일 변경

<h1 class="title">SparklePony Board of Directors</h1>

내 사이트의 기본 글꼴, 굴림에서 택배 및 이사회 단어 SparklePony와 헤드 라인을 보여줄 것이다. (그래, 나는 이것이 끔찍한 것임을 알고있다.)

나는 jQuery 문자열 교체를 사용해 보았으나, 은 문자열을 바꾼다. 단지 Courier에서보고 싶다. (클래스 추가하기. 그 단어 또는 그와 비슷한 것). SparklePony을 <span class="sparkle-pony">SparklePony</span>으로 바꾸면 클래스를 추가하는 대신 내 사이트에 태그와 모든 항목이 포함 된 전체 못생긴 문자열이 표시됩니다.

문자열 바꾸기에 문제가 있습니까? 아니면 모든 문자열을 스타일링하는 더 좋은 방법이 있습니까? 그런

출처

2012-12-20 beth

대체 작업을 수행하는 데 사용한 코드는 무엇입니까? innerHTML을 대체 했습니까? – user1884047

당신은 이런 식으로 작업을 수행 할 수 있습니다 - 당신이 원하는 선택 지정 - #을 ('H1') 또는 카테고리별로 .

$('.title').html(function(i,v){  
    return v.replace(/SparklePony/g,'<span class="sparkle">SparklePony</span>'); 
});

http://jsfiddle.net/cQjsu/

출처

2012-12-20 20:39:49

시도 뭔가 :

$.each($(".title"),function({ 
$(this).html($(this).html().replace("SparklePony","<span class='sparkle-pony'>SparklePony</span>")) 
});

출처

2012-12-20 20:33:08 Anass

(이 같은 질문에 좀 중요 할 것이다) 코드를 보지 않고는 추측이 올바르게 HTML을 구문 분석하는 .text() 대신 .html()으로 사용하고 있다는 것입니다 .

출처

2012-12-20 20:33:26 JJJ

도움이됩니다. Upvoted. – beth

약간의 정리로 할 수 있지만, 좋은 시작점이 될 수 있습니다 : http://jsfiddle.net/c24w/Fznh4/9/.

HTML

<div id="title">Highlight this blah blah HiGhLiGhT THIS blah</div> 
<button id="clickme">Click to highlight text</button>

CSS

#title{ 
    font-family: sans-serif; 
    font-size: 20pt; 
    margin: 30px 0; 
} 
span.highlight{ 
    color: #09f; 
    font-weight: bold; 
}

자바 스크립트

function highlightText(element, phrase, allOccurrences, caseSensitive){ 
    var modifiers = (allOccurrences ? 'g' : '') + (caseSensitive ? '' : 'i'); 
    var text = element.innerHTML; 
    element.innerHTML = text.replace(new RegExp(phrase, modifiers), function(match){ 
    return '<span class="highlight">' + match + '</span>'; 
    }); 
} 

var button = document.getElementById('clickme'); 
var el = document.getElementById('title'); 

button.onclick = function(){ 
    highlightText(el, 'highlight this', true, false); 
    button.onclick = null; 
};

출처

2012-12-20 20:38:25 c24w

니스와 짧은 :

var $body = $("body"); 
$body.html($body.html().replace(/SparklePony/ig, "<span class='cool'>SparklePony</span>"));

그러나 $("body")은 매우 비용이 많이 드는 선택 떨어져 있음을 유의하십시오. 보다 정확한 상위 대상을 고려해야합니다.

Demo here (fiddle)

출처

2012-12-20 20:41:55

지금은 h1로 제한하고 있습니다. 요점을 알았어. – beth

모든 문자열의 스타일 변경

답변

관련 문제