将 html 代码转换为 div 或 textarea 中的纯文本

Question

可能是一个愚蠢的问题，但它仍然存在。我很难将 html 代码转换为纯文本，以便最好在 textarea 表单字段中查看，但 div 可以。

这是我发现的：

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();
    }
});

我需要完成的是在用户选中特定复选框时显示/生成特定代码块，但我希望该代码可以作为代码读取，而不是作为标记读取并执行.重点是提供代码，以便用户可以复制和粘贴它，并对 div 名称、ID、值等进行修改……如果他们愿意的话。当然，每个复选框都会出现不同的代码，并在下面的 ul 类中一起列出。我提供了一个 js fiddle 来说明我需要什么。

我提供了一个js fiddle 示例来说明我在说什么。

Answer 1

您需要将 html 保留字符替换为其转义序列。 Here 是一个很好的文档。 jQuery 的 text(str) 应该会为您做到这一点。

Answer 2

您可以使用< 代替< 和> 代替>。 这是一个将html代码转换为纯文本的示例

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);
}

});

这里是fiddle

希望对你有帮助。

Answer 3

我已将data-id 属性添加到.rawHTML-code-insert 元素；这些被用作LI 元素的ID，因此可以很容易地找到它们以进行删除。我之前的小提琴的问题是标题中的特殊字符弄乱了[title="'+title+'"]' 选择器。

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