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

我提供了一个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

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

3 个答案: