我需要使用jQuery搜索文档来查找特定单词。它实际上是一个品牌名称,无论在何处使用都必须是粗体和斜体。
我可以使用:contain
执行此操作,但仅限于单个元素。我需要能够通过锚点,列出div等。
$( "a:contains('brand name')" ).html().replace('brand name'....
任何想法都会受到赞赏。
更新: 我已经实现了这个目的,并取代了页面上的所有内容,但我现在需要用类包装。如此接近但却难以接受这一点。再次提出一个想法。
$("body *").contents().each(function() {
if(this.nodeType==3){
this.nodeValue = this.nodeValue.replace(/brandname/g, 'colour');
}
});
答案 0 :(得分:3)
您可以使用文档片段替换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>
答案 1 :(得分:2)
$.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...
&#13;
.brand{
color: rgba(255,0, 100,0.4);
font: italic normal bold 1em/1 sans-serif;
}
&#13;
<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 <b> tag <b>bold Brand Name actually</b></p>
<code>This is a code tag with a Brand Name :)</code>
</div>
&#13;
赞赏这两个答案:
jQuery.ignore Plugin
Highlight Words (Ignoring names of HTML tags)
答案 2 :(得分:2)
如果您的代码有效,只需添加类似的代码行:
this.nodeValue.wrap( "<span class='new'></span>" );
答案 3 :(得分:1)
我的解决方案与前一个解决方案略有不同,但无论如何总是有效的,我认为。
在下面我的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(&#39;品牌名称&#39;,&#39;新品牌&#39;);
答案 4 :(得分:1)
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();
});
希望这有帮助,干杯
答案 5 :(得分:1)
从您的代码段开始:
$(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。
中工作