Wrap Every * on page Using jQuery

Question

I need to wrap every star on the page with <span class="red"></span> . A few things I tried do not work. I think it comes down to the fact that I need to look for a page for a specific character, and I cannot figure out how to do this.

Answer 1

In order not to replace all of the HTML (a very bad attitude), we can quickly manipulate the elements:

 var specialTags = ["script", "style"].join("|"), re = new RegExp("^(?:" + specialTags + ")$", "i"); for (var els = document.getElementsByTagName("*"), i = els.length; i--;) { var el = els[i]; if (re.test(el.tagName)) continue; for (var j = 0, childs = el.childNodes, lj = childs.length; j < lj; j++) { var child = childs[j]; if (child.nodeType === 3 && child.nodeValue.indexOf("*") > -1) { var segments = child.nodeValue.split("*"); for (var k = 0, lk = segments.length; k < lk; k++) { el.insertBefore(document.createTextNode(segments[k]), child); if (k < lk - 1) { var span = document.createElement("span"); span.className = "red"; span.appendChild(document.createTextNode("*")); el.insertBefore(span, child); } } el.removeChild(child); } } } 

This is pure JavaScript that does not require jQuery, which cannot really help here.

DEMO: http://jsfiddle.net/T4ZXA/5/

Answer 2

How about this? ...

http://jsfiddle.net/n3Sqn/

  $("body:contains(*)").contents().each(function() { if(this.nodeType == 1) { $(this).html($(this).html().replace(/\*/g, "<span class=\"red\">*</span>")) } }); 

Answer 3

This is a bit dirty and risky (explained below), but you can try the following:

 var allHTML = $("body").html(); allHTML = allHTML.replace(/\*/g, "<span class=\"red\">*</span>"); $("body").html(allHTML); 

http://jsfiddle.net/6rDK4/

Note. As Dobberter pointed out, this can replace * characters that are in HTML tags, for example. node.

EDIT . Keep in mind that this can fix all the scripts that you have in your body! Try replacing body with your main container.

EDIT2 : VisioN has published a more sophisticated but much more secure solution.

Answer 4

Without using jQuery so that it can be a little faster and definitely not dependent on libs:

 (function(str,e){ var regex = new RegExp(str, 'gi'); e.innerHTML = e.innerHTML.replace(regex, '<span class="red">*</span>'); })('*',document.body); 

Answer 5

This will work, and not replace * in tags it should not.

http://jsfiddle.net/DR6Ca/2/

 var text = $("body").find(":contains(*)").contents().filter(function() { //Don't include css or script tags, all other text nodes are fine. return this.nodeType == 3 && ($(this).parent().get(0).tagName.toUpperCase() !== "SCRIPT") && ($(this).parent().get(0).tagName.toUpperCase() !== "STYLE"); }).replaceWith(function() { return this.textContent.replace(/\*/g, "<span class=\"red\">*</span>"); 

You can check the code of others in this jsfiddle to make sure they keep hi blue or not. If he does not stay blue, he has an error.