एक स्ट्रिंग

Question

की सभी घटनाओं की शैली बदलें, मैं चाहता हूं कि ब्रांडिंग कारणों से हर बार जब यह शीर्षक में दिखाई देता है, तो शेष सामग्री से एक अद्वितीय फ़ॉन्ट में प्रदर्शित किया जाए। सादगी के लिए, आइए मेरा विशेष फ़ॉन्ट कूरियर है और मेरी कंपनी को स्पार्कलेपोनी कहा जाता है। तो, एक लाइन की तरह,

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

मेरी साइट डिफ़ॉल्ट फ़ॉन्ट, एरियल में शब्द कूरियर और निदेशक मंडल में SparklePony के साथ एक शीर्षक दिखाते हैं। (हाँ, मुझे पता है कि यह घृणित होगा।)

मैंने एक jQuery स्ट्रिंग प्रतिस्थापन का उपयोग करने का प्रयास किया है, लेकिन मैं स्ट्रिंग को प्रतिस्थापित नहीं करना चाहता, मैं इसे कूरियर में देखना चाहता हूं (कक्षा जोड़ना केवल उस शब्द या कुछ की तरह।) SparklePony को <span class="sparkle-pony">SparklePony</span> के साथ बदलकर टैग जोड़ने के बजाय टैग और सबकुछ मेरी साइट पर दिखाने के लिए पूरी बदसूरत स्ट्रिंग का कारण बन गया।

क्या मैं अपनी स्ट्रिंग प्रतिस्थापन के साथ कुछ गलत कर रहा हूं, या स्ट्रिंग की सभी घटनाओं को स्टाइल करने का एक बेहतर तरीका है? ऐसे ही

Answer 1

आप इसे इस तरह कर सकते हैं - चयनकर्ता आप चाहते हैं को निर्दिष्ट - # ('एच 1') या वर्ग द्वारा ।

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

http://jsfiddle.net/cQjsu/

Answer 2

कोशिश कुछ:

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

Answer 3

कोड (जो इस तरह सवाल में थोड़े महत्वपूर्ण होगा) देखकर बिना, सबसे अच्छा अनुमान है कि आप .html() के बजाय .text() उपयोग कर रहे हैं जो एचटीएमएल सही ढंग से पार्स होता है ।

Answer 4

यह कुछ tidying के साथ कर सकता है, लेकिन यह एक अच्छा प्रारंभिक बिंदु हो सकता है: http://jsfiddle.net/c24w/Fznh4/9/।

एचटीएमएल

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

सीएसएस

#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; 
}; 

Answer 5

अच्छा और कम:

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

लेकिन ध्यान रखें कि $("body") एक बहुत महँगा चयनकर्ता है। आपको एक और सटीक माता-पिता लक्ष्य पर विचार करना चाहिए।

Demo here (fiddle)