jQuery find/replace without changing original text
Is there a way in jQuery to find a string of text in jQuery and not replace it with something else but wrap that text with an element so when the script is finished it spits out the original text with the string of text wrapped.
Example:
Original Text
"Hello world to all people"
Search string
"world to"
Replace with <i></i>
Final output
"Hello <i>World to</i> all people"
Thanks in advance for the help!
Kind of working code:
function highlightChild(child) {
$(childElements[child]).text("");
console.log(child);
$('.child_element_' + child).bind('textselect', function(e){
var selection = e.text;
var str = $("#construct_version").text();
var wrap = jQuery(childElements[child]).text(selection);
var re = new RegExp("" + selection + "", "g");
console.log(str.replace(selection, function(m开发者_开发百科atch, key, val){
console.log(match);
console.log(key);
console.log(val);
jQuery(childElements[child]).text(val)
}));
});
}
The above code does the replace but where it actually does the replace it shows as undefined.
So if the original string is Hello world to all and I am wanting to replace world to with <b>world to</b>, it shows in the console.log as Hello undefined all
Altering page content is not, in general, as simple as replacing the html() markup with regex. All such attempts will fail where there is matched text in the markup itself, can fail when the browser chooses to serialise its DOM in a way that doesn't meet your expectations, and at best, when it does work, still forces you to serialise and re-parse all searched text, which is slow and destroys all non-serialisable information, such as form field values, JavaScript references and event handlers. You can get away with that for simple low-level elements, but against a container like <body> it'd be awful.
Better: instead of hacking at an HTML string, stick with the live DOM nodes, searching for Text nodes that match your requirements and doing the replacements on the straight text node data. Here's some plain JS code to do that (I guess you could put it in a plugin if you wanted.)
// Utility function to find matches in an element's descendant Text nodes,
// calling back a function with (node, match) arguments. The `pattern` can
// be a string, for direct string matching, or a RegExp object (which must
// be a `g`lobal regex.
//
function findText(element, pattern, callback) {
for (var childi= element.childNodes.length; childi-->0;) {
var child= element.childNodes[childi];
if (child.nodeType==1) {
var tag= child.tagName.toLowerCase();
if (tag!=='script' && tag!=='style' && tag!=='textarea')
findText(child, pattern, callback);
} else if (child.nodeType==3) {
var matches= [];
if (typeof pattern==='string') {
var ix= 0;
while (true) {
ix= child.data.indexOf(pattern, ix);
if (ix===-1)
break;
matches.push({index: ix, '0': pattern});
}
} else {
var match;
while (match= pattern.exec(child.data))
matches.push(match);
}
for (var i= matches.length; i-->0;)
callback.call(window, child, matches[i]);
}
}
}
Example usage with a plain string search term:
// Replace “World to” string in element text with <i>-wrapped version
//
var element= $('#construct_version')[0];
findText(element, 'World to', function(node, match) {
var wrap= document.createElement('i');
node.splitText(match.index+match[0].length);
wrap.appendChild(node.splitText(match.index));
node.parentNode.insertBefore(span, node.nextSibling);
});
You can just use .replace(), for example:
var str = "Hello world to all people";
str = str.replace(/(world to all)/g, "<i>$1</i>");
You can give it a try here applied to say the html of an element:
$("span").html(function(i, t) {
return t.replace(/(world to all)/g, "<i>$1</i>");
});
I think you might use javascript:
var t= "Hello world to all people";
var output = t.replace("world to", "<i>world to</i>"));
alert(output);
This is simple. Just do a jQuery .replace() function.
Here is a jsFiddle
http://jsfiddle.net/HZVs8/
The only issue with this method is that if you have any other words with the string "id" in them, it will convert those too. If the words are like "Project id", with a space, and not "Project-id" or "ProjectId", this method can be used like this:
$("body").html(function(i, x) {
return x.replace(/( id)/g, "ID");
});
Make sure there is a space before the first id or it will select EVERY word that had the letters "id" in them.
I wrote this below function long back, but it may not be so efficient but it works good.
categoryname is the string and userinput is the string you want to highlight, I want to wrap it over bold, you can change to li
function GetHighlightedString(categoryname,userinput) {
userinput=TrimSS(userinput);
var tempToSearch=categoryname.toLowerCase(); // to take care of case issue.
var mysearchTemp=userinput;
var mytemppos = tempToSearch.indexOf(mysearchTemp.toLowerCase());
var finalstring=categoryname;
var str1,str2,str3;
str1=tempToSearch.substring(0,mytemppos);
str2=tempToSearch.substring(mytemppos, mytemppos+userinput.length);
if(userinput.toLowerCase()==str2)
{
finalstring=str1 + '<b>';
finalstring=finalstring+str2+'</b>';
}
else
{
finalstring= str1+str2;
}
str3=tempToSearch.substring(mytemppos+userinput.length);
finalstring=finalstring+str3;
return finalstring;
}
加载中,请稍侯......
精彩评论