Question

I was wondering how to obtain the text inside a given div, with also the input’s values as text.

<div id="example">This is a <input type="text" value="right"/> test.</div>

If I just try to get text like this with jQuery :

$("#example").text();

The result would be This is a test. and I’d want : This is a right test.
The number of input would be unknow. As well as the order of the elements…

EDIT :
I finally resolved my own problem :

var finalText="";
   $("#example").contents().filter(function() {
        if(this.nodeType==3){ finalText =finalText+ this.nodeValue;}
        else if(this.nodeName=="INPUT"){ finalText=finalText+this.value;}
           return finalText
    })  

The living example

But @Jonathan Lonowski answer is more clear and simpler than mine !

Answer 1

You might try cloning so you can replaceWith the inputs with their values. Then grab the text as you were:

var clone = $('#example').clone();

clone.find(':input').replaceWith(function () {
    return $(this).val();
});

alert(clone.text());