I have a function that wraps text with a span
$(".ui-content").html(function (i, v)
{
return v.replace(/(CANADA)/gi, '<span class="query">$1</span>');
});
However when I pass in the term "div" or "span" or "a" which are html, the page gets messed up badly of course.
What can I change the regex to remove only text that is not part of a html code like <strong> but does work on A strong person is a helpful friend
Same concept, as @elclanrs, but with an imitation of negative look behind:
$(".ui-content").html(function (i, v) {
return v.replace(/([^</])(strong)/gi, ' <span class="query">$2</span> ');
});
Also a good article about how to treat certain limitations of JavaScript regexp: http://blog.stevenlevithan.com/archives/mimic-lookbehind-javascript
Node manipulations to the rescue, as always!
function toArray(obj) {
var r = [];
for(var i = 0; i < obj.length; i++) {
r.push(obj[i]);
}
return r;
}
$('.ui-content').each(function() {
var stack = [this];
var c, n;
while(c = stack.pop()) {
var childNodes = toArray(c.childNodes);
for(var i = 0; n = childNodes[i]; i++) {
if(n.nodeType === 1) {
stack.push(n);
} else if(n.nodeType === 3) {
var matches = n.nodeValue.split(/(CANADA)/i);
for(var i = 0; i < matches.length; i++) {
var newNode;
if(/CANADA/i.test(matches[i])) {
newNode = document.createElement('span');
newNode.className = 'query';
newNode.appendChild(document.createTextNode(matches[i]));
} else {
newNode = document.createTextNode(matches[i]);
}
n.parentNode.insertBefore(newNode, n);
}
n.parentNode.removeChild(n);
}
}
}
});
:) cheers
:) I will make it work man all good keep my +1 ; anyhoo favouriting OP's question:)I know people usually insist in not using regex for parsing html but hey this seems to work just fine. This uses a negative lookahead to replace only the word "strong" and not actual <strong> tags:
/strong(?!>)/
Edit:
Use this regex which is more flexible and allows for attributes:
/strong(?!(>|\s\w+=))/g;
In any case, it all depends on your HTML. If regex don't do it then you'll have to parse properly.
