The
Geek Answers Handbook

Selecting text from a div is not an obvious way

Here is my div:

<div id="myDiv">The <span class="cordial-err-corr" id="good0-0" data-original-title="" title="">best</span> way to receive congrats <span> <span class="cordial-err-corr" id="good0-1" data-original-title="" title="">are</span> <div class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a class="prop0-1">is</a></li> <li><a class="prop0-1">are</a></li> </ul> </div> </span> to give a correct answer.</div>

I would like to receive this text: "The best way to receive congratulations is to give the correct answer."

So I call $('#myDiv').text() . This does not work, since I get two items in ul.dropdown-menu .

The next step is to filter or remove unwanted children, that is:

 <div class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a class="prop0-1">is</a></li> <li><a class="prop0-1">are</a></li> </ul> </div>

I tried to play with $ .filter or $ .not or $ .children with jquery selectors, etc. I can not find the right way to do this. Need help!

You can find the code in jsfiddle: http://jsfiddle.net/Ku7FY/

[EDIT] One solution offers this code:

 $('#result').append( $('#myDiv').text().replace($(".btn-group").text(),"") ).append('<br />')

If there are multiple div.btn-group , just loop like:

 var result = $('#myDiv').text(); $(".btn-group").each(function() { result = result.replace($(this).text(),""); }); $('#result').append(result).append('<br />')
+4
source share
4 answers

So, if I get this directly, you want to exclude the list from .text() . Try something like:

 $('#result').append( $('#myDiv').text().replace($(".dropdown-menu").text(),"") ).append('<br />')
+2
source

Try

 function process(el){ var array = []; $(el).contents().each(function(){ var $this = $(this), text; if(this.nodeType == 3){ text = $.trim($this.text()); if(text){ array.push(text) } } else if($this.is(':not(.btn-group)')){ Array.prototype.push.apply(array, process(this)) } }) return array; } console.log(process($('#myDiv')).join(' '))

Demo: Fiddle

+1
source

If you don't mind putting all the "dumb" text in between, then you can do this very simply by grabbing the "dumb" text spaces and .cordial-err-corr (and find() ).

 <div class="well" id="myDiv"><span class="cordial-content">The </span> <span class="cordial-err-corr" id="good0-0" data-original-title="" title="">best </span> <span class="cordial-content">way to receive congrats </span> <span> <span class="cordial-err-corr" id="good0-1" data-original-title="" title="">are </span> <div class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a class="prop0-1">is</a></li> <li><a class="prop0-1">are</a></li> </ul> </div> </span> <span class="cordial-content">to give a correct answer. </span></div>

and

 $('#myDiv').find('.cordial-err-corr,.cordial-content').text()

Demo: Fiddle

+1
source

I have an ugly, albeit fairly simple (I think) method:

We can make a copy and then remove the dom elements that we do not want to display. Then we can get the desired text.

 var clone_div = $('#myDiv').clone(); clone_div.find('.btn-group').remove(); $('#result').append(clone_div.text()).append('<br />');

Here is the jsfiddle. http://jsfiddle.net/Ku7FY/4/

+1
source

More articles:


All Articles