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

这可能是个愚蠢的问题，但还是来了。我很难将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>

这就是我想要显示原始HTML代码的地方，但它被呈现为纯文本，而不是作为标记读取，本质上需要它被呈现，以便可以复制和粘贴
这就是我想要显示原始HTML代码的地方，但它被呈现为纯文本，而不是作为标记读取，本质上需要它被呈现，以便它可以被复制并粘贴到表单字段中，发送到另一个.php页面

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

$（'input[type=“checkbox”]）。单击（函数（）{
var title=$（this）.closest（'.box复选框颜色'）.find（'.rawHTML代码插入'）.html（）；
//如果选中该复选框，则将该项目添加到ul。
if（$（this.attr（'checked'））{
var html='
'+title+'
'；
$（'ul.result'）.append（html）；
}否则{
//如果未选中该复选框，请从ul中删除该项目。
$（'li[title=“”+title+“]”）。删除（）；
}
});

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

---

我已经提供了一个我所说的示例。

您需要用转义序列替换html保留字符。”这是个好医生。jQuery应该为您这样做。

您可以使用

而不是

。 下面是一个将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>

div class=“框复选框颜色”
输入type=“checkbox”name=“Color:\u Green”id=“sku0001 Green”value=“是”/
标签for=“sku0001绿色”/label
/div
div class=“框复选框颜色”
输入type=“checkbox”name=“Color:\u Green”id=“sku0001 Green”value=“是”/
标签for=“sku0001绿色”/label
/div

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

$（'input[type=“checkbox”]）。单击（函数（）{
var title=$（this）.closest（'.box复选框颜色'）.find（'.rawHTML代码插入'）.html（）；
//如果选中该复选框，则将该项目添加到ul。
if（$（this.attr（'checked'））{
var html='
'+title+'
'；
$（'ul.result'）.append（html）；
}否则{
var html=''；
$（'ul.result'）.html（html）；
}

}))

这是

---

我希望它能帮助您。

我已经在

元素中添加了
数据id
属性；它们被用作
LI
元素的ID，因此可以很容易地找到它们进行删除。我以前的小提琴的问题是标题中的特殊字符弄乱了
[title=“+title+”]”
选择器

HTML:


这就是我想要显示原始HTML代码的地方，但它被呈现为纯文本，而不是作为标记读取，本质上需要它被呈现，以便可以复制和粘贴
这就是我想要显示原始HTML代码的地方，但它被呈现为纯文本，而不是作为标记读取，本质上需要它被呈现，以便它可以被复制并粘贴到表单字段中，发送到另一个.php页面


JS:

$（'input[type=“checkbox”]）。单击（函数（）{
var el=$（this）.closest（'.box复选框颜色'）.find（'.rawHTML代码插入'）；
var title=el.html（）；
变量id=el.data（'id'）；
//如果选中该复选框，则将该项目添加到ul。
如果（$（this）.is（':checked'））{
var html=$（“
”{
标题:标题,，
正文：标题，
id:id
});
$（'ul.result'）.append（html）；
}否则{
//如果未选中该复选框，请从ul中删除该项目。
$（'li#'+id）.remove（）；
}
});

使用jQuery
.text（）
将代码放入文本区域。请您在JSFIDLE中显示它。我知道这很仓促，但这会让我妻子感觉好一点，哈哈。文本一经检查就不会删除，似乎有括号阻止删除，对此有什么想法吗？见新版本。我必须更新jQuery的版本，因为我使用了一些在1.4.Nice中不存在的方法，它是非常棒的兄弟。非常感谢。这里也是一样，取消选中框后删除文本现在不起作用。如何解决这个问题？@user3204638这里更新了fiddle修复了你的问题很好，非常感谢，很高兴知道你们在这里帮助有抱负的程序员。万分感谢
<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>

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