Develop Reference

Javascript delete div text from string

I have a string which contains 2 div in it with their text and settings.
for example :
<div class="a" id="b">blabla </div><div class="a">Here is the text i need to get </div>
I need to pull out the text from this string, cant use sub string cause the text is dynamic and not always written the same.
Thanks

var str = '<div class="a" id="b">blabla </div><div class="a">Here is the text i need to get </div>';
var tmp = document.createElement('div');
tmp.innerHTML = str;
console.log(tmp.innerText || tmp.textContent); // is this what you want?

Try a regex replace like
'<div class="a" id="b">blabla </div><div class="a">Here is the text i need to get </div>'.replace(/(\<div.*?\>|\<\/div\>)/g, '')
Demo: Fiddle

Javascript RegEx - Split using text between tags

I'm working on a script and need to split strings which contain both html tags and text. I'm trying to isolate the tags and eliminate the text.
For example, I want this:
string = "<b>Text <span>Some more text</span> more text</b>";
to be split like this:
separation = string.split(/some RegExp/);
and become:
separation[0] = "<b>";
separation[1] = "<span>";
separation[2] = "</span>";
separation[3] = "</b>";
I would really appreciate any help or advice.

You'll probably want to look into String.match instead:
var str = "<b>Text <span>Some more text</span> more text</b>";
var separation = str.match(/<[^]+?>/g);
console.log(separation); // ["<b>", "<span>", "</span>", "</b>"]

Parsing specific HTML tags in Javascript

I'm looking for the Javascript to parse the following HTML:
<p>random text random text random text random text</p>
<kbd><h2>Heading One</h2>Body text Body text Body text Body text</kbd>
<p>random text random text random text random text</p>
... and return just:
Heading One
In other words, I'd like to strip all tags and Body Text from within the <kbd> tags.
Any ideas would be greatly appreciated!

var input = /* that HTML string here */;
var div = document.createElement('div');
div.innerHTML = input;
var h2 = div.getElementsByTagName('h2')[0];
var text = h2.innerText || h2.textContent;
alert(text); // alerts "Heading One"
Reference:
document.createElement
innerHTML
element.getElementsByTagName
Node.textContent (Quirksmode compatibility table)
Demo:
http://jsfiddle.net/mattball/vaVPF/

Regex?
var s = "<p>random text</p>\n" +
"<kbd><h2>Heading One</h2>Body text</kbd>\n" +
"<p>random text</p>";
s.match(/<h2>(.*?)<\/h2>/)[1] // == "Heading One"
This matches group one as the shortest possible (.*?) string between <h2>...</h2>.
You can find all matches using the g option.
s.match(/<h2>(.*?)<\/h2>/g) // == ["<h2>Heading One</h2>"]
Note that groups are not accessible.
For multiline content between tags, use
s.match(/<tag>[\s\S]*?<\/tag>/ig)

if you include jquery (jquery.com) you can do this:
var heading=$("h2").html();

Javascript match regex - prevent greediness

I am having an issue with my javascript match() regex.
<div class="a"> whitespace, new lines, and content </div>
<div class="junk"> junkjunkjunk </div>
<div class="a"> whitespace, new lines, and content </div>
<div class="junk"> junkjunkjunk </div>
<div class="a"> whitespace, new lines, and content </div>
Let's say I want to capture everything in between <div class="a"> and the closest </div>. The following regex is capturing everything, I'm assuming due to greediness:
/<div class="a">[\s\S]+<\/div>?/ig
I want to capture each <div class="a">...</div> individually such that I can output each as capture[0], capture[1], etc. How would I do this?
Thank you.
EDIT: Updated to better reflect my problem. Assume there is undesired markup and text between desired divs.

First, parsing HTML with regex is baaad... seriously man, you can use the innerHTML property of each div to change it's content, or better, use jQuery or another javascript framework to do this kind of jobs.
This job can be made with jquery in this way:
$("div.a").each(
function() {
alert($(this).html())
}
);
Second, if you want badly to use regex, and assuming there is only text (no markup) between the divs, you can use something like this:
/<div class="a">([^<])+<\/div>/ig

To give a straight regex answer:
To remove the greediness of the quantifiers, put a ? after the quantifier like this:
/<div class="a">[\s\S]+?<\/div>?/ig
This forces the + to match as less as possible. Works also with the *.

then you need the question mark before the closing div but after the + operator, and use () around what you want to capture.

One way to prevent regex greediness, is to not use regex.
If you'll allow for an alternate solution. This assumes your HTML is in string form, and not part of the DOM:
var str = '<div class="a"> whitespace, new lines, and content </div>\
<div class="a"> whitespace, new lines, and content </div>\
<div class="a"> whitespace, new lines, and content </div>';
var temp = document.createElement('div');
temp.innerHTML = str;
var capture = [];
for( var i = 0; i < temp.childNodes.length; i++ ) {
var node = temp.childNodes[i];
if( node && node.nodeType === 1 && node.className === 'a' ) {
capture.push( node.innerHTML );
}
}
alert(capture[0]);
With respect to a regex, here's one approach using .replace():
var str = '<div class="a"> whitespace, new lines, and content </div>\
<div class="a"> whitespace, new lines, and content </div>\
<div class="a"> whitespace, new lines, and content </div>';
var res = [];
str.replace(/<div class="a">([^<]+)<\/div>/ig,function(s,g1) {
res.push(g1);
});

jQuery find and replace string

I have somewhere on website a specific text, let's say "lollypops", and I want to replace all the occurrences of this string with "marshmellows". The problem is that I don't know where exactly the text is. I know I could do something like:
$(body).html($(body).html().replace('lollypops', 'marshmellows'));
This would probably work, but I need to rewrite as little HTML as I can, so I'm thinking something like:
search for the string
find the closest parent element
rewrite only the closest parent element
replace this even in attributes, but not all, for example replace it in class, but not in src
In example, I would have structure like this
<body>
<div>
<div>
<p>
<h1>
<a>lollypops</a>
</h1>
</p>
<span>lollypops</span>
</div>
</div>
<p>
<span class="lollypops">Hello, World!</span>
<img src="/lollypops.jpg" alt="Cool image" />
</p>
<body>
In this example, every occurrence of "lollypops" would be replaced, only <img src="... would remain the same and the only elements that would actually be manipulated would be <a> and both <span>s.
Does anybody know how to do this?

You could do something like this:
$("span, p").each(function() {
var text = $(this).text();
text = text.replace("lollypops", "marshmellows");
$(this).text(text);
});
It will be better to mark all tags with text that needs to be examined with a suitable class name.
Also, this may have performance issues. jQuery or javascript in general aren't really suitable for this kind of operations. You are better off doing it server side.

You could do something this way:
$(document.body).find('*').each(function() {
if($(this).hasClass('lollypops')){ //class replacing..many ways to do this :)
$(this).removeClass('lollypops');
$(this).addClass('marshmellows');
}
var tmp = $(this).children().remove(); //removing and saving children to a tmp obj
var text = $(this).text(); //getting just current node text
text = text.replace(/lollypops/g, "marshmellows"); //replacing every lollypops occurence with marshmellows
$(this).text(text); //setting text
$(this).append(tmp); //re-append 'foundlings'
});
example: http://jsfiddle.net/steweb/MhQZD/

You could do something like this:
HTML
<div class="element">
<span>Hi, I am Murtaza</span>
</div>
jQuery
$(".element span").text(function(index, text) {
return text.replace('am', 'am not');
});

Below is the code I used to replace some text, with colored text. It's simple, took the text and replace it within an HTML tag. It works for each words in that class tags.
$('.hightlight').each(function(){
//highlight_words('going', this);
var high = 'going';
high = high.replace(/\W/g, '');
var str = high.split(" ");
var text = $(this).text();
text = text.replace(str, "<span style='color: blue'>"+str+"</span>");
$(this).html(text);
});

var string ='my string'
var new_string = string.replace('string','new string');
alert(string);
alert(new_string);

Why you just don't add a class to the string container and then replace the inner text ? Just like in this example.
HTML:
<div>
<div>
<p>
<h1>
<a class="swapText">lollipops</a>
</h1>
</p>
<span class="swapText">lollipops</span>
</div>
</div>
<p>
<span class="lollipops">Hello, World!</span>
<img src="/lollipops.jpg" alt="Cool image" />
</p>
jQuery:
$(document).ready(function() {
$('.swapText').text("marshmallows");
});