Convert html code into plain text inside a div or textarea

Question

might be a stupid question but nonetheless here it goes. I am having difficulty converting html code into plain text to be viewed preferably inside a textarea form field, but a div will do.

Here is what I have found:

html:

<div class="box-checkbox-color">

        <input type="checkbox" name="Color:_Green"  id="sku0001-green" value="Yes" />
        <label for="sku0001-green"></label>
        <div style="display:none;" title="#" class="rawHTML-code-insert">This is where I would like to display raw HTML code BUT have it rendered as plain text instead of being read as markup, essentially need it to be presented so it can be copied and pasted</div>
    </div>


<div class="box-checkbox-color">

        <input type="checkbox" name="Color:_Green2"  id="sku0001-green2" value="Yes" />
        <label for="sku0001-green2"></label>
        <div style="display:none;" title="#" class="rawHTML-code-insert">This is where I would like to display raw HTML code BUT have it rendered as plain text instead of being read as markup, essentially need it to be presented so it can be copied and pasted into a form field to be sent to another .php page</div>
    </div>


<ul class="result"></ul>

Javascript:

$('input[type="checkbox"]').click(function(){
    var title = $(this).closest('.box-checkbox-color').find('.rawHTML-code-insert').html();
    // If the checkbox is checked, add the item to the ul.
    if($(this).attr('checked')){
        var html = '<li title="' + title + '">' + title + '</li>';
        $('ul.result').append(html);
    } else {     
        // if the checkbox is unchecked, remove the item from the ul.
        $('li[title="' + title + '"]').remove();
    }
});

What I need to accomplish with this is to show/generate a specific block of code when the user checks a specific checkbox, but I would like that code to be readable as code rather than it being read as markup and executed as such. Point is to provide the code so users can copy and paste it, and make modifications to div name, id's, values, etc... if they want to. And of course, different code will appear for each checkbox and be listed together in the ul class below. I provided a js fiddle that should illustrate what I need.

I have provided a js fiddle example of what I'm talking about.

Answer 1

You need to replace the html reserved characters with their escape sequences. Here 'sa good doc on that. jQuery's text(str) should do that for you.

Answer 2

You ca use < instead of < and > instead of > . here is an example to convert html code to plain text

HTML

<div class="box-checkbox-color">

        <input type="checkbox" name="Color:_Green"  id="sku0001-green" value="Yes" />
        <label for="sku0001-green"></label>
        <div style="display:none;" title="#" class="rawHTML-code-insert">&lt;div class="box-checkbox-color"&gt;

        &lt;input type="checkbox" name="Color:_Green"  id="sku0001-green" value="Yes" /&gt;
        &lt;label for="sku0001-green"&gt;&lt;/label&gt;
    &lt;/div&gt;</div>
    </div>


<div class="box-checkbox-color">

        <input type="checkbox" name="Color:_Green2"  id="sku0001-green2" value="Yes" />
        <label for="sku0001-green2"></label>
        <div style="display:none;" title="#" class="rawHTML-code-insert">&lt;div class="box-checkbox-color"&gt;

        &lt;input type="checkbox" name="Color:_Green"  id="sku0001-green" value="Yes" /&gt;
        &lt;label for="sku0001-green"&gt;&lt;/label&gt;
    &lt;/div&gt;</div>
    </div>


<ul class="result"></ul>

JS

$('input[type="checkbox"]').click(function(){
var title = $(this).closest('.box-checkbox-color').find('.rawHTML-code-insert').html();
// If the checkbox is checked, add the item to the ul.
if($(this).attr('checked')){
    var html = '<li title="' + title + '">' + title + '</li>';
    $('ul.result').append(html);
} else {     
     var html = '';
    $('ul.result').html(html);
}

});

here is fiddle

i hope it can help you.

Answer 3

I've added data-id attributes to the .rawHTML-code-insert elements; these get used as the IDs of the LI elements, so they can be found easily for removal. The problem with my previous fiddle was that the special characters in the title were messing up the [title="'+title+'"]' selector.

HTML:

<div class="box-checkbox-color">

    <input type="checkbox" name="Color:_Green"  id="sku0001-green" value="Yes" />
    <label for="sku0001-green"></label>
    <div style="display:none;" title="#" class="rawHTML-code-insert" data-id="html1">This is where I would like to display raw <b>HTML</b> code BUT have it rendered as plain text instead of being read as markup, essentially need it to be presented so it can be copied and pasted</div>
    </div>


<div class="box-checkbox-color">

    <input type="checkbox" name="Color:_Green2"  id="sku0001-green2" value="Yes" />
    <label for="sku0001-green2"></label>
    <div style="display:none;" title="#" class="rawHTML-code-insert" data-id="html2">This is where I would like to display raw HTML code BUT have it rendered as plain text instead of being read as markup, essentially need it to be presented so it can be copied and pasted into a form field to be sent to another .php page</div>
</div>

<ul class="result"></ul>

JS:

$('input[type="checkbox"]').click(function(){
    var el = $(this).closest('.box-checkbox-color').find('.rawHTML-code-insert');
    var title = el.html();
    var id = el.data('id');
    // If the checkbox is checked, add the item to the ul.
    if($(this).is(':checked')){
        var html = $("<li/>", {
            title: title,
            text: title,
            id: id
        });
        $('ul.result').append(html);
    } else {     
        // if the checkbox is unchecked, remove the item from the ul.
        $('li#' + id).remove();
    }
});

DEMO