How to get plain text from an element in PrototypeJS?

Question

How to get plain text from an element?

<div id="summary_header"> <span class="heading" style="margin-left: 210px;">This is first line</span><br/> <span style="margin-left: 260px;"><b> You are in second line</b></span><br/> </div> 

What is the way to get text from this div tag? I want to get plain text like "This is the first line. You are on the second line."

$('summary_header').textContent gives spaces.

Answer 1

If you need a method, no problem. This is the beauty of javascript and this is prototype inheritance.

Prototype.js allows you to extend the Element object with new methods. Just add this to your scripts:

 Element.addMethods({ getText: function(element) { element = $(element); return element.innerHTML.strip().stripTags().replace(/\n/g,' ').replace(/\s+/g,' '); } }); 

This is almost the same as @koko suggested, but I suggest changing every new line character \n to one place instead of deleting them and changing any number of consecutive space characters into one space. This is similar to browser behavior.

When you use this for your scripts, after loading prototype.js , you can use the new method to get plain text:

var plainText = $ ('summary_header'). getText ();

Answer 2

It is not very pretty, but it works. I don’t know what you are trying to achieve, but there you go:

 var f = $('summary_header').innerHTML.strip().stripTags().replace(/\n/g,'').replace(/\s{2}/g,''); 

http://jsfiddle.net/e8uFS/1/