本文で文字列を検索してからスタイルを入力してください。

Question

特定の単語を見つけるには、jQueryを使用してドキュメントを検索する必要があります。それは実際に使用される太字と斜体でなければならないブランド名です。

これは、:containを使用して行うことができますが、個々の要素単位でのみ行うことができます。私はアンカー、リストdivs等を経由することができる必要があります。

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

すべてのアイデアをいただければ幸いです。

更新： 私はこれを使ってページ上のすべてのものを置き換えますが、今はクラスでスパンをラップする必要があります。だからこそ近づいてしまったが、これで困った。再度アイデアをいただければ幸いです。この2つの答えに

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

私のソリューションは少し前のものとは異なるが、いずれにしても常に有効である、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（ 'ブランド名'、 '新ブランド'）;あなたのコードが動作するかどうか

Answer 3

は、単にコードのように同様の行を追加します。

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

Answer 4

あなたは、文書の断片とtextNodesを置き換えることができます。これにより、テキストノードとスタイルノードをグループ化し、既存のtextNodeと交換することができます。

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

これは、最も効率的なアプローチであるが、かなり簡単とのを取得できない場合があります私のテストでやった仕事。 parentNodeプロパティを検索すると、all browsersで機能します。