Jquery，如何转义引号

Question

我正在使用一个简单的 jquery 代码，它从标签中获取 html 代码，然后将此内容放入表单输入中

<td class="name_cat" ><span class="name_cat">It&#039;s a &quot;test&quot; </span> (5)</td>

jquery 将内容获取到span.name_cat 并将其返回为It's a "test"。 因此，当我将其打印到输入中时，它变成了

<input value="It's a "test"" />

你可以想象它只会显示为 It's a ，下面的双引号将关闭值标签。 保留原始字符串而不在输入中显示 utf8 代码的诀窍是什么？

jQuery 代码

            $(".edit_cat").click(function(){

            tr = $(this).parents("tr:first");
            id_cat = $(this).attr("id");
            td_name = tr.find(".name_cat");
            span_name = tr.find("span.name_cat").html();
            form = '<form action="/admin/controllers/edit_cat.php" method="post" >'+
                            '<input type="hidden" name="id_cat" value="'+id_cat+'" />'+
                            '<input type="text" name="name_cat" value="'+span_name+'" />'+
                            '<input type="submit" value="save" />'+
                            '</form>';
            td_name.html(form);

            console.log(span_name);


        }
        );

我基本上需要html() 不解码Utf8

Answer 1

我相信这应该会为您解决问题。

var span_name = tr.find("span.name_cat").html().replace(/"/g, """);

示例： http://jsfiddle.net/yzthA/

另外，如果您还没有使用 var 声明变量，请不要忘记。

Answer 2

您可以按照现在的方式构建表单，但使用 jQuery 的上下文遍历表单对象

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>

<script type="text/javascript">
$(function() {
    $('#go').click(function() { 
        var tester = $('<div></div>').html('It&#039;s a &quot;test&quot;');
        var form = $('<form action="/admin/controllers/edit_cat.php" method="post" >' +
                    '<input type="hidden" name="id_cat" />' +
                    '<input type="text" name="name_cat" />' +
                    '<input type="submit" value="save" />' +
                    '</form>');
        $(':hidden:first', form).attr('value', tester.text());
        $(':text:first', form).attr('value', "Some attribute");

        $('#output').append(form);
    });
});
</script>
<input id="go" type="submit" value="click"/>
<div id="output">
</div>

我在这里所做的是将您的表单 html 输入包装在一个 jQuery 对象中作为form。然后，您可以使用很少使用的 jQuery 形式查询该对象上下文中的项目：

jQuery(选择器，[上下文])
选择器：包含选择器表达式的字符串
context：用作上下文的 DOM 元素、文档或 jQuery

编辑：我创建了一个 tester 对象并将内容设置为您的 html 示例。然后，当我在隐藏输入中设置值时，我调用.text() 来获取非html 表示。该值与您预期的相同。

<form action="/admin/controllers/edit_cat.php" method="post">
    <input type="hidden" name="id_cat" value="It's a &quot;test&quot;">
    <input type="text" name="name_cat" value="Some attribute">
    <input type="submit" value="save">
</form>

不过，您必须在后端解码此 html。这可能是您能做的最好的事情，因为 XML 不允许像 "\"this\"" 这样的“转义”引号。规范要求像"this" 一样转义引号。

Answer 3

您可以使用此函数对值进行 HTML 编码：

function htmlEncode(str) {
    var div = document.createElement('div');
    var txt = document.createTextNode(str);
    div.appendChild(txt);
    return div.innerHTML;
}

然后编码任何可以包含引号的值：

span_name = htmlEncode(tr.find("span.name_cat").html());

更好的选择可能是使用 jQuery 构建输入并使用 val() 方法设置值，然后附加到表单：

var $form = $('<form action="/admin/controllers/edit_cat.php" method="post" />');
var $id_cat_input = $('<input type="hidden" name="id_cat" />');
$id_cat_input.val(id_cat);
$id_cat_input.appendTo($form);

Answer 4

我将 user113716 的answer 转换为一个 jQuery 插件并对其进行了一些清理。

(function($) {
  $.fn.escapeQuotes = function() {
    return this.html().replace(/"/g, '"');
  }
})(jQuery);

var spanValue = $('span').escapeQuotes();
var formTemplate = [
  '<form action="/admin/controllers/edit_cat.php" method="post" >',
    '<input type="text" name="name_cat" value="' + spanValue + '" />',
    '<input type="submit" value="save" />',
  '</form>'
].join('');

$(formTemplate).appendTo('body');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="name_cat">It&#039;s a &quot;test&quot; </span> (5)

Answer 5

您应该将它们转换为 html 实体或跳过它们。 作为 html 实体的引用如下所示：" 用你的编程语言来做。不带js。