2009-09-18 9 views
5

मैं जावास्क्रिप्ट के साथ प्रतिस्थापन करने का तरीका जानने का प्रयास कर रहा हूं। मैं पृष्ठ के पूरे शरीर को देख रहा हूं और कीवर्ड मिलान को HTML टैग के भीतर नहीं बदलना चाहता हूं।जावास्क्रिप्ट में, टैग को प्रभावित किए बिना मैं HTML पृष्ठ में टेक्स्ट को कैसे प्रतिस्थापित कर सकता हूं?

<body> 
    <span id="keyword">blah</span> 
    <div> 
    blah blah keyword blah<br /> 
    whatever keyword whatever 
    </div> 
</body> 

<script type="text/javascript"> 
var replace_terms = { 
    'keyword':{'url':'http://en.wikipedia.org/','target':'_blank'} 
} 

jQuery.each(replace_terms, function(i, val) { 
    var re = new RegExp(i, "gi"); 
    $('body').html(
    $('body').html().replace(re, '<a href="'+ val['url'] +'" target="'+val['target']+'">' + i + '</a>') 
); 
}); 

</script> 

मैं (< और > के बीच) "कीवर्ड" है कि एक HTML टैग के भीतर नहीं है की सभी आवृत्तियों को बदलने के लिए देख रहा हूँ:

यहाँ एक उदाहरण है।

मुझे लगता है कि अगर मुझे "कीवर्ड" script या style तत्व के भीतर है तो मुझे अनदेखा करने की भी आवश्यकता है।

+2

है एक HTML टैग के अंदर परिभाषा से पूरे पृष्ठ नहीं:

यहाँ मेरे लिए काम करने लगता है कि एक विधि डोम का उपयोग कर रहा है? –

+0

हां। मेरे उदाहरण में एचटीएमएल के माध्यम से नहीं आया था। मेरा मूल रूप से मतलब है कि मैं टैग के किसी भी गुण को प्रतिस्थापित नहीं करना चाहता हूं। – Phil

+1

मुझे लगता है कि वह ब्रैकेट्स (एक विशेषता नाम/मान की तरह) के भीतर है। – Mayo

उत्तर

12

HTML का विश्लेषण करने के लिए regex का उपयोग न करें। [एक्स] [एचटी] एमएल एक नियमित भाषा नहीं है और regex का उपयोग कर विश्वसनीय रूप से संसाधित नहीं किया जा सकता है। आपके ब्राउज़र में एक अच्छा HTML पार्सर अंतर्निहित है; चलो काम करने के तनाव को लेते हैं जहां टैग हैं।

इसके अलावा आप वास्तव में शरीर पर html()/innerHTML पर काम नहीं करना चाहते हैं। यह पूरे पृष्ठ को क्रमबद्ध और पुन: पेश करेगा, जो धीमा हो जाएगा और ऐसी कोई भी जानकारी खो जाएगी जिसे HTML में क्रमबद्ध नहीं किया जा सकता है, जैसे ईवेंट हैंडलर, फॉर्म मान और अन्य जावास्क्रिप्ट संदर्भ।

function replaceInElement(element, find, replace) { 
    // iterate over child nodes in reverse, as replacement may increase 
    // length of child node list. 
    for (var i= element.childNodes.length; i-->0;) { 
     var child= element.childNodes[i]; 
     if (child.nodeType==1) { // ELEMENT_NODE 
      var tag= child.nodeName.toLowerCase(); 
      if (tag!='style' && tag!='script') // special case, don't touch CDATA elements 
       replaceInElement(child, find, replace); 
     } else if (child.nodeType==3) { // TEXT_NODE 
      replaceInText(child, find, replace); 
     } 
    } 
} 
function replaceInText(text, find, replace) { 
    var match; 
    var matches= []; 
    while (match= find.exec(text.data)) 
     matches.push(match); 
    for (var i= matches.length; i-->0;) { 
     match= matches[i]; 
     text.splitText(match.index); 
     text.nextSibling.splitText(match[0].length); 
     text.parentNode.replaceChild(replace(match), text.nextSibling); 
    } 
} 

// keywords to match. This *must* be a 'g'lobal regexp or it'll fail bad 
var find= /\b(keyword|whatever)\b/gi; 

// replace matched strings with wiki links 
replaceInElement(document.body, find, function(match) { 
    var link= document.createElement('a'); 
    link.href= 'http://en.wikipedia.org/wiki/'+match[0]; 
    link.appendChild(document.createTextNode(match[0])); 
    return link; 
}); 
+1

'i -> 0' चालाक। मैंने पहले कभी नहीं देखा है। –

+2

मैं इसके लिए क्रेडिट का दावा नहीं कर सकता, यह सी-जैसी भाषाओं में रिवर्स-पुनरावृत्ति के लिए एक मुहावरे है! :-) – bobince

+0

मैं आमतौर पर केवल 'i -' का उपयोग करता हूं, जैसा कि: 'var (= i i 100; i--;)' – kangax

संबंधित मुद्दे

 संबंधित मुद्दे