将html代码转换为div或textarea内的纯文本 [英] Convert html code into plain text inside a div or textarea

问题描述

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

以下是我发现的内容：

html：

 < div class =box-checkbox-color> 
 
< input type =checkboxname =Color：_Greenid =sku0001-greenvalue =Yes/> 
< label for =sku0001-green>< / label> 
< div style =display：none; title =＃class =rawHTML-code-insert>这是我想要显示原始HTML代码的地方，但它已经呈现为纯文本而不是作为标记读取，本质上需要它被呈现，因此它可以被复制并粘贴< / div> 
< / div> 
 
 
< div class =box-checkbox-color> 
 
< input type =checkboxname =Color：_Green2id =sku0001-green2value =Yes/> 
< label for =sku0001-green2>< / label> 
< div style =display：none; title =＃class =rawHTML-code-insert>这是我想要显示原始HTML代码的地方，但它已经呈现为纯文本而不是作为标记读取，本质上需要它被呈现，因此它可以被复制并粘贴到表单字段中以发送到另一个.php页面< / div> 
< / div> 
 
 
< ul class =result>< / ul> 
  

Javascript：

  $（'input [type =checkbox]'）。click（function（）{
 var title = $（this）.closest（'。box-checkbox-color'）。find （'.rawHTML-code-insert'）。html（）; 
 //如果复选框被选中，将项目添加到ul。
 if（$（this）.attr（'checked' ））{
 var html ='< li title =''+ title +'>'+ title +'< / li>'; 
 $（'ul.result'）。 append（html）; 
} else {
 //如果复选框未被选中，则从ul中删除该项目
 $（'li [title =''+ title +'] '）.remove（）; 
} 
}）; 
  

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

我提供了 js fiddle 的例子。

code> data-id 属性添加到 .rawHTML-code-insert 元素中;这些将被用作 LI 元素的ID，因此可以轻松找到它们以供删除。我以前的小提琴的问题是，标题中的特殊字符混乱了 [title =''+ title +']'选择器。

HTML：

 < div class =box-checkbox-color> 
 
< input type =checkboxname =Color：_Greenid =sku0001-greenvalue =Yes/> 
< label for =sku0001-green>< / label> 
< div style =display：none; title =＃class =rawHTML-code-insertdata-id =html1>这是我想要显示原始< b> HTML< / b>代码但它已将其呈现为纯文本而不是作为标记读取，本质上需要将其呈现为可以复制和粘贴以及< / div> 
< / div> 
 
 
< div class =box-checkbox-color> 
 
< input type =checkboxname =Color：_Green2id =sku0001-green2value =Yes/> 
< label for =sku0001-green2>< / label> 
< div style =display：none; title =＃class =rawHTML-code-insertdata-id =html2>这是我想要显示原始HTML代码的地方，但是它将它呈现为纯文本而不是作为标记读取，本质上需要它将被呈现，因此可以将其复制并粘贴到表单字段中，以发送到另一个.php页面< / 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'）; 
 //如果复选框为（$（this）.is（'：checked'））{
 var html = $（< li />，{
 title：title，
 text：title，
 id：id 
}）; 
 $（'ul.result'）。append（html）; 
 } else {
 //如果复选框未被选中，请从ul中删除该项目。
 $（'li＃'+ id）.remove（）; 
} 
} ）; 
  

DEMO

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.

解决方案

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

这篇关于将html代码转换为div或textarea内的纯文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！