JQuery: use <span> from string in checkbox value

Question

I have a string of HTML contained in a var called "content". The string of HTML contains a span with an id, eg:

<span id="valuespan">This is the value of a text box</span>

I want to use whatever is contained between the span tags as a value for a check box, but im not really sure how to do this.

Can anyone help me out?

Thanks!

Answer 1

Since your string is still a string, and not an element on the page, you could either match the angle bracket with a regex, or use jQuery to create an element and extract the source

RegExp

var content = '<span id="valuespan">This is the value of a text box</span>';
var text = content.match(/>(.*)<\/span>/)[1];
$(target-checkbox).val(text);

jQuery

var content = '<span id="valuespan">This is the value of a text box</span>';
var text = $(content).text();
$(target-checkbox).val(text);

Regular expressions suck and should be avoided if at all possible, but this is also a horrible use of jQuery. You should probably look farther back in the information chain if possible, and deal with the text another way.

edit for comment: for multiple spans, with unique IDs

var content = '<span id="valuespan1">This is the value of a text box</span><span id="valuespan2">This is the value of a text box</span>';
var fragment = $('<div />').html(content);
var text1 = fragment.find('#valuespan1').text();
var text2 = fragment.find('#valuespan2').text();

Answer 2

This assumes the span string is not in the page. I wrapped the content variable in an extra div which assures can use find regardless of what level of html hirarchy the span is on

DEMO: http://jsfiddle.net/8WZJT/

var content='<span id="valuespan">This is the value of a text box</span>';

$('#test').val($('<div>').append(content).find('#valuespan').text()).click(function(){
    alert($(this).val())
})

Answer 3

To get the string:

var contents = $('#valuespan').text();

To apply it to the checkbox:

$('#checkbox').val(contents);

Answer 4

For creating the checkbox dinamically here is the answer: http://jsfiddle.net/martinschaer/zQAHj/

var span = '<span id="valuespan">This is the value of a text box</span>';
var value = $(span).text();
var id = $(span).attr('id');
var field = '<input type="checkbox" name="' + id + '" id="' + id + '" value="' + value + '" />';
field += '<label for="' + id + '">' + value + '</label>';
$('#theform ul').append('<li>' + field + '</li>');

For more than one span inside the variable: http://jsfiddle.net/martinschaer/2b5Lj/

var span = '<span id="valuespan">This is the value of a text box</span><span id="valuespan2">This another text box value</span>';

$('span', $('<div>' + span + '</div>')).each(function(){
    var value = $(this).text();
    var id = $(this).attr('id');
    var field = '<input type="checkbox" name="' + id + '" id="' + id + '" value="' + value + '" />';
    field += '<label for="' + id + '">' + value + '</label>';
    $('#theform ul').append('<li>' + field + '</li>');
});