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

可能是一个愚蠢的问题，但仍然在这里。我很难将html代码转换为纯文本，以便在textarea表单字段中查看，但div会执行。将html代码转换为纯文本内div或textarea

以下是我发现：

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小提琴，应该说明我需要什么。

我提供了一个我正在谈论的js fiddle示例。

来源

2014-01-18 WebEducate

使用jQuery'的.text（）'把代码放到textarea的。 – Barmar

你会如此善良，以显示它在jsfiddle。我知道这是一个屁股，但它会让我妻子感觉更好，哈哈。 – WebEducate

我已将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

来源

2014-01-18 05:33:58 Barmar

一旦未选中，文本不会被删除，似乎任何括号都会阻止删除它，对此有何看法？ – WebEducate

查看新版本。我不得不在小提琴中更新jQuery的版本，因为我使用了1.4中不存在的一些方法。 – Barmar

不错，它的真棒兄弟。太感谢了。 – WebEducate

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

来源

2014-01-18 05:27:00 akronymn

这是伟大的未来参考，谢谢。 – WebEducate

您可以使用<而不是<和>而不是>。这里是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

我希望它可以帮助你。

来源

2014-01-18 05:27:49

同样在这里，取消选中该框后删除文本现在不起作用。如何解决这个问题？ – WebEducate

@ user3204638这里更新小提琴http://jsfiddle.net/ek2zh/149/修复你的问题 –

很好的作品，非常感谢，很高兴知道你们在这里帮助有抱负的程序员。感谢百万 – WebEducate

尝试下面的脚本，它会解决你的目的

$(document).ready(function(){ 
$('input[type="checkbox"]').click(function(){ 

    var title = $(this).closest('.box-checkbox-color').find('.rawHTML-code-insert').html(); 
    //alert(title); 
    // If the checkbox is checked, add the item to the ul. 

    if($(this).is(':checked')){ //this is correct way to check 
     alert(title); 
     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(); 
    } 
}); 
});

错误

A码）不准备活动中提及了检查jQuery的复选框的

B）的方法是不正确

来源

2014-01-18 05:34:27 sanjeev

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

回答

相关问题