स्ट्रिंग के लिए शरीर खोजें और फिर शैली

Question

मुझे एक विशेष शब्द खोजने के लिए jQuery के साथ एक दस्तावेज़ के माध्यम से खोजना होगा। यह वास्तव में एक ब्रांड नाम है जिसे कहीं भी बोल्ड और इटैलिक होना चाहिए।

मैं :contain लेकिन केवल एक व्यक्ति के तत्व के आधार पर का उपयोग कर ऐसा कर सकते हैं। मैं कोई भी विचार की सराहना की हैं, लंगर के माध्यम से जाने के लिए सक्षम होने की जरूरत है सूचियों divs आदि

$("a:contains('brand name')").html().replace('brand name'.... 

।

अद्यतन: मुझे यह मिल गया है जो एक पृष्ठ पर सबकुछ काम करता है और बदल देता है लेकिन अब मुझे कक्षा के साथ एक अवधि में लपेटने की जरूरत है। तो बंद करो लेकिन इस पर फंस गया। फिर एक विचार की सराहना की जाएगी। इस दो जवाब को

$("body *").contents().each(function() { 
    if(this.nodeType==3){ 
    this.nodeValue = this.nodeValue.replace(/brandname/g, 'colour'); 

    } 
}); 

Answer 1

$.fn.ignore = function(sel){ 
 
    return this.clone().find(sel||">*").remove().end(); 
 
}; 
 

 
function rebrand(el, word){ 
 
    if (!word.length && !el) return; 
 
    var $el = $(el), html = $el.ignore("script").html(), 
 
     rgx = new RegExp("(?![^<]+>)("+ word +")", "g"); 
 
    $el.html(html.replace(rgx, "<span class='brand'>$1</span>")); 
 
} 
 

 
$(function() { // DOM ready 
 

 
    // !!! IMPORTANT: REBRAND FIRST !!! 
 
    rebrand("body", "Brand Name"); 
 
    // so the following code will not break on lost events, data bindings etc... 
 

 
    // Other DOM ready code here like: 
 
    $("button").click(function(){ $(this).css({color:"red"}); }); 
 
    
 
}); 
 

 
// Other JS, jQ code here...

.brand{ 
 
    color: rgba(255,0, 100,0.4); 
 
    font: italic normal bold 1em/1 sans-serif; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <h1>Title with Brand Name!</h1> 
 
    <p> 
 
    Change styles only to Brand Name!<br> 
 
    but don't mess with <a href="#">links to Brand Name are cool</a><br> 
 
    <button>Button with Brand Name works!</button> 
 
    </p> 
 
    <ul> 
 
    <li>Other Brand</li><li>Brand Name</li><li>Brandy</li> 
 
    </ul> 
 
</div> 
 
<div> 
 
    <h2>Subtitle <i>and italic Brand Name</i></h2> 
 
    <p>The HTML will not get messed cause of Brand Nameing<br> 
 
    Paragraph with a &lt;b&gt; tag <b>bold Brand Name actually</b></p> 
 
    <code>This is a code tag with a Brand Name :)</code> 
 
</div>

कुडोस:
jQuery.ignore Plugin
Highlight Words (Ignoring names of HTML tags)

Answer 2

मेरे समाधान, हमेशा वैध पिछले एक से लेकिन किसी भी मामले में थोड़ा अलग है मैं मान लीजिये।

निम्नलिखित मेरी jQuery समारोह में

:

function replaceBrand(brandName) { 
    $('body').find(":not(iframe)").contents().filter(function(index, element) { 
    if (element.nodeType == 3 && element.nodeValue.indexOf(brandName) != -1) { 
     var newInnerValue = element.nodeValue.replace(brandName, '<div><span class="brand">' + brandName + '</span></div>'); 
     $(element).replaceWith(newInnerValue); 
    } 
}); 

}

replaceBrand ('ब्रांड नाम', 'नया ब्रांड');

Answer 3

अपने कोड काम करता है, बस कोड के इस तरह के एक समान पंक्ति जोड़ें:

this.nodeValue.wrap("<span class='new'></span>"); 

Answer 4

आप किसी दस्तावेज़ टुकड़ा के साथ textNodes बदल सकते हैं। यह आपको टेक्स्ट और स्टाइल नोड्स को समूहबद्ध करने और मौजूदा टेक्स्ट नोड के साथ स्वैप करने की अनुमति देता है।

var x = 0; 
 
$("body *").contents().each(function() { 
 

 
    if (this.nodeType == 3 && this.parentElement.tagName != "SCRIPT") { 
 

 
    var text = this.nodeValue; 
 
    var i = 0, lastIndex = 0; 
 
    var search = /brandname/ig; 
 
    var result; 
 
    var parent = this.parentNode; 
 
    var textNode = null; 
 
    var highlight = null; 
 
    var textRange = ""; 
 
    var fragment = document.createDocumentFragment(); 
 

 
    // Do search 
 
    while ((result = search.exec(text)) !== null) { 
 
    
 
     // add plain text before match 
 
     textRange = text.substring(lastIndex, result.index); 
 
     if (textRange != '') { 
 
     textNode = document.createTextNode(textRange); 
 
     fragment.appendChild(textNode); 
 
     } 
 
     
 
     // add highlight elements 
 
     highlight = document.createElement('span'); 
 
     highlight.innerHTML = result[0]; 
 
     highlight.className = "hi"; 
 
     fragment.appendChild(highlight); 
 
     lastIndex = search.lastIndex; 
 
    } 
 

 
    // Add trailing text 
 
    textRange = text.substring(lastIndex); 
 
    if (textRange != '') { 
 
     textNode = document.createTextNode(textRange); 
 
     fragment.appendChild(textNode); 
 
    } 
 
     
 
    // Replace textNode with our text+highlight 
 
    if(fragment.children.length > 0) { 
 
     this.parentNode.replaceChild(fragment, this); 
 
    } 
 
    } 
 

 
});

span.hi { 
 
    background-color: #FFCC00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    Hello world this is my brandname. The BrAnDNAMe is regex matched and we can change subelements like "<a href=''>Brandname</a>." It should not replace <b>elements</b> that don't match. 
 
</p>

Answer 5

var rgx_BRAND = /(foo)/ig; 
$("*") 
    .contents() 
    .filter(function() { 
     return this.nodeType === Node.TEXT_NODE && this.textContent.search(rgx_BRAND) > -1; 
    }) 
    .each(function(){ 
     var html = this.textContent.replace(rgx_BRAND, '<b class="-my-brand">$1</b>'); 
     $(this).before(html).remove(); 
    }); 

आशा इस मदद करता है, चीयर्स

Answer 6

अपने टुकड़ा से जा रहे हैं:

$(function() { 
    var parent, needle = 'brandname', 
     regex = new RegExp(needle, 'g'); 
    $("body *").contents().each(function() { 
     if(this.nodeType==3 && ((parent = $(this.parentNode)).length > 0) { 
      parent.html(parent.html().replace(
       regex, '<span class="brand-name">' + needle + '</span>')); 
     } 
    } 
}); 

यह सबसे कारगर तरीका नहीं हो सकता है लेकिन काफी आसान और के मिल सकता है मेरे परीक्षण में किया गया काम। पेरेंट नोड प्रॉपर्टी को देखकर all browsers में काम करना चाहिए।