Tìm kiếm nội dung cho chuỗi và sau đó chọn kiểu

Question

Tôi cần phải tìm kiếm trong tài liệu bằng jQuery để tìm một từ cụ thể. Nó thực sự là một thương hiệu phải được in đậm và in nghiêng ở bất cứ nơi nào được sử dụng.

Tôi có thể thực hiện việc này bằng cách sử dụng :contain nhưng chỉ trên cơ sở phần tử riêng lẻ. Tôi cần để có thể đi qua các neo, liệt kê các div, v.v.

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

Bất kỳ ý tưởng nào cũng sẽ được đánh giá cao.

Cập nhật: Tôi đã làm việc này và thay thế mọi thứ trên một trang nhưng bây giờ tôi cần bọc trong một khoảng với một lớp. Gần như vậy nhưng bị vướng vào cái này. Một lần nữa một ý tưởng sẽ được đánh giá cao.

$("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>

Kudos tới hai câu trả lời này:
jQuery.ignore Plugin
Highlight Words (Ignoring names of HTML tags)

Answer 2

Giải pháp của tôi là một chút khác biệt so với trước đó một nhưng trong trường hợp bất kỳ lúc nào cũng có giá trị, tôi giả định.

Trong sau chức năng của tôi 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 ('Tên thương hiệu', 'hoàn toàn mới');

Answer 3

nếu mã của bạn hoạt động, chỉ cần thêm một dòng tương tự như mã:

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

Answer 4

Bạn có thể thay thế các textNodes với một đoạn văn bản. Điều này cho phép bạn nhóm văn bản và các nút được tạo kiểu và trao đổi nó với mã văn bản hiện có.

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(); 
    }); 

Hope this helps, Cheers

Answer 6

Đi từ đoạn mã của bạn:

$(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>')); 
     } 
    } 
}); 

Nó có thể không phải là phương pháp hiệu quả nhất nhưng khá dễ dàng và có được của công việc được thực hiện trong các bài kiểm tra của tôi. Tìm kiếm thuộc tính parentNode sẽ hoạt động trong all browsers.