Simple javascript find and replace - javascript

is there a straightforward method for searching within a div for a specific string and replacing it with another? I cannot use .replaceWith alone because there are other elements within the div I need to preserve. I've tried various javascript methods found here to no avail.
So something like:
$('#foo').find('this string').replaceWith('this other string');
for:
<div id="foo"><div id="child">Other Element</div>this string</div>
Thanks.

Try this:
var foo = $('#foo').html();
foo = foo.replace('this string', 'this other string');
$('#foo').html(foo);
Fiddle: http://jsfiddle.net/maniator/w9GzF/

This replaces all occurrences:
var $foo = $('#foo'),
fooHtml = $foo.html();
$foo.html(fooHtml.replace(/this string/g, 'this other string'));

Just using html().replace() with match all results element attribute or tag name.
I face this issue also, my solution is similar to findAndReplace() function from http://james.padolsey.com/javascript/find-and-replace-text-with-javascript/ but using regular expression to get all textNode and search in each of them.
function epubSearch(query) {
var d = document.getElementsByTagName("body")[0];
var re = new RegExp(query, "gi");//pattern for keyword
var re0 = new RegExp("[>][^><]*[><]", "gi");//pattern to get textnode
d.innerHTML = d.innerHTML.replace(re0, function (text) {
// with each textNode, looking for keyword
return text.replace(re, "<span class=\"search-result\" style=\"background-color:red;\">$&</span>");
});
}

Here's a jQuery plugin I just wrote that provides safeReplace for collections.
(function($){
$.fn.safeReplace = function ( find, replacement ) {
return this.each(function(index, elem) {
var
queue = [elem],
node,
i;
while (queue.length) {
node = queue.shift();
if (node.nodeType === 1) {
i = node.childNodes.length;
while (i--) {
queue[queue.length] = node.childNodes[i];
}
} else if (node.nodeType === 3) {
node.nodeValue = node.nodeValue.replace( find, replacement );
}
}
});
};
})(jQuery);
And here's how you use it:
$('#foo').safeReplace( /this string/g, 'something else' );
I've only tested in FF 4, and only on the sample HTML input - more testing is recommended.
Hope this helps!

What's wrong with String.replace();?
e.g.
$("#div").html($("#div").html().replace("search string", "replace string"));
Or Exploded:
var $divElement = $("#div"); //Find the div to perform replace on
var divContent = $divElement.html(); //Get the div's content
divContent = divContent.replace("search string", "replace string"); //Perform replace
$divElement.html(divContent); //Replace contents of div element.

This one works as many times as your term appears and will not kill any of the important things that shouldn't be changed (stored in the excludes array).
usage: findAndReplace('dog','cat', document.getElementById('content'));
/* js find andreplace Based on http://james.padolsey.com/javascript/find-and-replace-text-with-javascript/ */
function findAndReplace(searchText, replacement, searchNode) {
if (!searchText || typeof replacement === 'undefined') {
return;
}
var regex = typeof searchText === 'string' ?
new RegExp(searchText, 'g') : searchText,
childNodes = (searchNode || document.body).childNodes,
cnLength = childNodes.length,
excludes = ['html','head','style','link','meta','script','object','iframe'];
while (cnLength--) {
var currentNode = childNodes[cnLength];
if (currentNode.nodeType === 1 &&
excludes.indexOf(currentNode.nodeName.toLowerCase() + ',') === -1) {
arguments.callee(searchText, replacement, currentNode);
}
if (currentNode.nodeType !== 3 || !regex.test(currentNode.data) ) {
continue;
}
var parent = currentNode.parentNode,
frag = (function(){
var html = currentNode.data.replace(regex, replacement),
wrap = document.createElement('div'),
frag = document.createDocumentFragment();
wrap.innerHTML = html;
while (wrap.firstChild) {
frag.appendChild(wrap.firstChild);
}
return frag;
})();
parent.insertBefore(frag, currentNode);
parent.removeChild(currentNode);
}
}

Related

Javascript replace function error

I have a problem with the javascript replace function and I don't succeed to resolve it.
This is my code : https://jsfiddle.net/r36k20sa/1/
var tags = ['zazie', 'johnny'];
tags.forEach(function(element) {
content = content.replace(
new RegExp("(?!<a.*?>.*?)(\\b" + element + "\\b)(?!.*?<\\/a>)", "igm"),
'$1'
);
});
In the tags array, if I reverse the array "johnny" then "zazie" all tags are well selected otherwise, some tags are missing. (The last in this example). What can be the trick?
What can be explained that ? It seems like the javascript replace function runs asynchronous?
Thanks for your help.
Are you seriously using regex to process HTML when you have a DOM parser at your fingertips?
var content = document.getElementById('content');
function findTextNodes(root,ret) {
// recursively descend into child nodes and return an array of text nodes
var children = root.childNodes, l = children.length, i;
ret = ret || [];
for( i=0; i<l; i++) {
if( children[i].nodeType == 1) { // ElementNode
// excluding A tags here, you might also want to exclude BUTTON tags
if( children[i].nodeName != "A") {
findTextNodes(children[i],ret);
}
}
if( children[i].nodeType == 3) { // TextNode
ret.push(children[i]);
}
}
return ret;
}
var textNodes = findTextNodes(content);
// now search those text node contents for matching tags.
var tags = ['zazie','johnny'], tagcount = tags.length, regexes, tag;
for( tag=0; tag<tagcount; tag++) {
regexes[tag] = new RegExp("\b"+tags[tag]+"\b","i");
}
var node, match, index, tagtext, newnode;
while(node = textNodes.shift()) {
for( tag=0; tag<tagcount; tag++) {
if( match = node.nodeValue.match(regexes[tag])) {
index = match.index;
textNodes.unshift(node.splitText(index + tags[tag].length));
tagtext = node.splitText(index);
newnode = document.createElement('a');
newnode.href = "";
newnode.className = "esk-seo-plu-link";
newnode.style.cssText = "background:red;color:white";
tagtext.parentNode.replaceChild(newnode,tagtext);
newnode.appendChild(tagtext);
}
}
}
// and done - no more action needed since it was in-place.
See it in action
Please replace . with \\.
var tags = ['zazie', 'johnny'];
tags.forEach(function(element) {
content = content.replace(
new RegExp("(?!<a.*?>\\.*?)(\\b" + element + "\\b)(?!\\.*?<\\/a>)", "igm"),
'$1'
);
});

JavaScript code to find text in an HTML body and highlight it FIX

I have this JavaScript function that takes a string and highlight it in the html page. I'm basically trying to simulate Ctrl-F with initial value string:
Function
<script type="text/javascript">
function highlight(word) {
var node = document.body;
for (node = node.firstChild; node; node = node.nextSibling) {
var n = node;
var match_pos = 0;
match_pos = n.nodeValue.indexOf(word);
var before = n.nodeValue.substr(0, match_pos);// split into a part before the match
var middle = n.nodeValue.substr(match_pos, word.length); // the matched word to preserve case
var after = document.createTextNode(n.nodeValue.substr(match_pos + word.length));// and the part after the match
var highlight_span = document.createElement("span");// create a span in the middle
highlight_span.style.backgroundColor = "yellow";
highlight_span.appendChild(document.createTextNode(middle));// insert word as textNode in new span
n.nodeValue = before; // Turn node data into before
n.parentNode.insertBefore(after, n.nextSibling); // insert after
n.parentNode.insertBefore(highlight_span, n.nextSibling); // insert new span
highlights.push(highlight_span);
highlight_span.id = "highlight_span" + highlights.length;
node = node.nextSibling; // Advance to next node or we get stuck in a loop because we created a span (child)
}
}
</script>
Basically, The sentence I give to the function as an argument is not highlighted. Knowing that I'm positive it exists.
This Loads the HTML page
#Html.Action("GetHtmlPage", "Upload", new { path = Model.documentPath })
Then, This Calls the funtion
#{
var str = Model.sentence["sentence"].AsString;
<script>highlight(#str)</script>
}
There was a problem with your loop. Something like this will work much better.
var highlights = []
function searchElement(elem, word){
var children = Array.prototype.slice.call(elem.childNodes);
for(var i=0; i<children.length; i++){
if(children[i].nodeType == Node.TEXT_NODE){
var n = children[i];
var match_pos = n.nodeValue.indexOf(word);
if(match_pos == -1){
continue;
}
var before = n.nodeValue.substr(0, match_pos);// split into a part before the match
var middle = n.nodeValue.substr(match_pos, word.length); // the matched word to preserve case
var after = document.createTextNode(n.nodeValue.substr(match_pos + word.length));// and the part after the match
var highlight_span = document.createElement("span");// create a span in the middle
highlight_span.style.backgroundColor = "yellow";
highlight_span.appendChild(document.createTextNode(middle));// insert word as textNode in new span
n.nodeValue = before; // Turn node data into before
n.parentNode.insertBefore(after, n.nextSibling); // insert after
n.parentNode.insertBefore(highlight_span, n.nextSibling); // insert new span
highlights.push(highlight_span);
highlight_span.id = "highlight_span" + highlights.length;
}else if(children[i].childNodes.length){
searchElement(children[i], word);
}
}
}
function highlight(word) {
searchElement(document.body, word)
}
highlight("Even more test");
test
<div>
More test
<span>Even more test</span>
</div>

Javascript RegEx - Split Html-string

I'm working on a script and need to split strings which contain both html tags and text. I'm trying to isolate the text and elimanate the tags
For example, I want this:
string = '<p><span style="color:#ff3366;">A</span></p><p><span style="color:#ff3366;text-decoration:underline;">B</span></p><p><span style="color:#ff3366;text-decoration:underline;"><em>C</em></span></p>';
to be split like this:
separation = string.split(/some RegExp/);
and become:
separation[0] = "<span style="color:#ff3366;">A</span>";
separation[1] = "<span style="color:#ff3366;text-decoration:underline;">B</span>";
separation[2] = "<span style="color:#ff3366;text-decoration:underline;"><em>C</em></span>";
After that I would like to split the sepeartion string like this:
stringNew = '<span style="color:#ff3366;">A</span>';
extendedSeperation = stringNew.split(/some RegExp/);
extendedSeperation[0] = "A";
extendedSeperation[1] = "style="color:#ff3366;";
Don't use RegEx for reasons explained in comments.
Instead, do this:
Create an invisible node:
node = $("<div>").css("display", "none");
Attach it to the body:
$("body").append(node);
Now inject your HTML into the node:
node.html(myHTMLString);
Now you can traverse the DOM tree and extract/render it as you like, much like this:
ptags = node.find("p") // will return all <p> tags
To get the content of a tag use:
ptags[0].html()
Finally, to clear the node do:
node.html("");
This should be enough to get you going.
This way you leverage the internal parser of the browser, as suggested in the comments.
Your exact expectations are a little unclear, but based only on the information given here is an example that may give you ideas.
Does not use RegExp
Does not use jQuery or any other library
Does not append and remove elements from the DOM
Is well supported across browsers
function walkTheDOM(node, func) {
func(node);
node = node.firstChild;
while (node) {
walkTheDOM(node, func);
node = node.nextSibling;
}
}
function textContent(node) {
if (typeof node.textContent !== "undefined" && node.textContent !== null) {
return node.textContent;
}
var text = ""
walkTheDOM(node, function (current) {
if (current.nodeType === 3) {
text += current.nodeValue;
}
});
return text;
}
function dominate(text) {
var container = document.createElement('div');
container.innerHTML = text;
return container;
}
function toSeparation(htmlText) {
var spans = dominate(htmlText).getElementsByTagName('span'),
length = spans.length,
result = [],
index;
for (index = 0; index < length; index += 1) {
result.push(spans[index].outerHTML);
}
return result;
}
function toExtendedSeperation(node) {
var child = dominate(node).firstChild,
attributes = child.attributes,
length = attributes.length,
text = textContent(child),
result = [],
style,
index,
attr;
if (text) {
result.push(text);
}
for (index = 0; index < length; index += 1) {
attr = attributes[index]
if (attr.name === 'style') {
result.push(attr.name + '=' + attr.value);
break;
}
}
return result;
}
var strHTML = '<p><span style="color:#ff3366;">A</span></p><p><span style="color:#ff3366;text-decoration:underline;">B</span></p><p><span style="color:#ff3366;text-decoration:underline;"><em>C</em></span></p>',
separation = toSeparation(strHTML),
extendedSeperation = toExtendedSeperation(separation[0]),
pre = document.getElementById('out');
pre.appendChild(document.createTextNode(JSON.stringify(separation, null, 2)));
pre.appendChild(document.createTextNode('\n\n'));
pre.appendChild(document.createTextNode(JSON.stringify(extendedSeperation, null, 2)));
<pre id="out"></pre>
Of course you will need to make modifications to suit your exact needs.

How do I reference the data in a img src="" tag after getElementByID with Javascript?

I am trying to getElementById("game_image") and the TagName is 'img' I want the data within the 'src' tag, specifically the 'key=f430a2c1' token.:
<img id="game_image" src="img/index.php?key=f430a2c1&rand=956875" alt="game image." style="padding-right:150px;" />
*
$("#b_hint").click(function(){
// var images = document.getElementsByTagName("img"),
// wanted;
var data = document.getElementById("game_image"), wanted;
wanted = data[1].src;
// if (images.length) {
// wanted = images[1].src;
// if (wanted) {
// wanted = wanted.split("?");
// if (wanted.length >= 2 && wanted[1].indexOf("&") !== -1) {
// wanted = wanted[1].split("&")[0];
// }
// }
//}
//if (typeof wanted !== "string") {
// wanted = "";
// }
alert(wanted);
wanted = data.src;
getElementById returns a single element, not a NodeList, so you don't need to use array syntax.
wanted = data.src;
wanted = wanted.substring(wanted.indexOf('?') + 1)
Taking into account the the src URL could contain more parameters separated by '&', you can extract key=... like this:
function getKey(url) {
var idx1 = url.indexOf("?") + 1;
if (idx1 == -1) { return ""; }
var idx2 = url.indexOf("&");
if (idx2 == -1) { idx2 = url.length; }
return url.substring(idx1, idx2);
}
$("#b_hint").click(function() {
var img = document.getElementById("game_image");
var wanted = getKey(img.src);
...
NOTE:
For the getKey() function to work properly, the 'key' parameter must come straight ater the '?' (e.g. ...?key=..., but not ...?some=other&key=...).
See also this regex-powered solution:
var regex = new RegExp(".*?\\?.*?\\b(key=[^&]+)");
$("#b_hint").click(function() {
var src = document.getElementById("game_image").src;
var wanted = regex.test(src) ? src.match(regex)[1] : "";
...
This will properly match the key=<value> part, even if 'key' is not the first parameter in the query string.
Jquery?!
working fiddle -> http://jsfiddle.net/mpyfQ/8/
var data = $("#game_image").attr("src");
data = data.substring(data.indexOf('?') + 1);
The answer should be InnerHTML.

JS - text value of tag - when tag is string

How can I get text value of a tag when tag is stored as string?
var value = "<div>teeext</div>";
tag can be anything, its attributes may contain ">" string as well, regexp can be dangerous - also text value itself can be another tag.
You can make a dummy element:
var value = "<div>teeext</div>";
var div = document.createElement('div');
div.innerHTML = value;
var text = div.innerText || div.textContent;
Using just javascript:
var div = document.createElement('div');
var value = "<div>teeext</div>";
div.innerHTML = value;
var element = div.firstChild
console.log(element.innerHTML); //this the stuff in the tag
Using jquery:
$(value).html();
I guess that you're trying to strip tags.. In that case you can do it like this:
originalString = "<div>teeext</div>";
var value = originalString.replace(/(<([^>]+)>)/ig,"");
Test it out. If there are any exceptions which you need to handle, then just comment here and I'll try to help you further.
Edit for multiple tags:
originalString = "<div>teeext</div>";
outputString = originalString;
while (outputString.indexOf(/(<([^>]+)>)/ig) !== -1){
outputString = outputString.replace(/(<([^>]+)>)/ig,"");
}
value = outputString;
Haven't tested it, but you get the point ;)
Does this help as a starter?
function getText(tagString) {
var firstOpenTag = tagString.indexOf(">"),
lastCloseTag = tagString.lastIndexOf("</"),
substrLength;
if (firstOpenTag == -1 || lastCloseTag == -1) {
return tagString;
}
substrLength = (tagString.length - firstOpenTag) - (tagString.length - lastCloseTag) - 1;
return tagString.substr(firstOpenTag + 1, substrLength);
}
var value = "<div>teeext</div>";
console.log(getText(value));
var moreTags = "<div><ul><li>Text</li></ul></div>",
returnValue = moreTags,
prevReturnValue = "";
while (returnValue !== prevReturnValue) {
prevReturnValue = returnValue;
returnValue = getText(returnValue);
}
console.log(returnValue);

Categories