使用jQuery设置Textarea文本以正确格式化HTML代码

如何解决使用jQuery设置Textarea文本以正确格式化HTML代码

|| 我正在尝试通过Javascript（jQuery）为我的Textarea生成文本，因为我需要在JS中包含一个变量。这就是我现在要做的：

$(\"#txt_banner1\").text(
            \'<a href=\"\'+producturl+\'\"><object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,19,0\" width=\"125\" height=\"125\"><param name=\"movie\" value=\"../../images/banerxsky2.swf\" /><param name=\"quality\" value=\"high\" /><embed src=\"http://www.xSkySoftware.com/images/banerxsky2.swf\" quality=\"high\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" type=\"application/x-shockwave-flash\" width=\"125\" height=\"125\"></embed></object>\')

现在您可能会想：\“伙计，格式化您的代码\\”。好吧，这就是问题-我希望我的文本区域包含格式正确的HTML代码，但是当我在参数中格式化代码时，它将无法正常工作（脚本停止）。有什么建议么？编辑：格式化的代码，它不起作用：

        $(\"#txt_banner1\").text(
        \'<a href=\"\'+producturl+\'\">
        <object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0\" width=\"125\" height=\"125\">
        <param name=\"movie\" value=\"../../images/banerxsky2.swf\" />
        <param name=\"quality\" value=\"high\" />
        <embed src=\"http://www.xSkySoftware.com/images/banerxsky2.swf\" quality=\"high\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" type=\"application/x-shockwave-flash\" width=\"125\" height=\"125\">
        </embed>
        </object>\');

EDIT2：这是我的Textarea代码：

<textarea id=\"txt_banner1\"><a href=\"AFF_URL\">
  <object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0\" width=\"125\" height=\"125\">
  <param name=\"movie\" value=\"http://xSkySoftware.com//images/banerxsky2.swf\" />
  <param name=\"quality\" value=\"high\" />
  <embed src=\"http://www.xSkySoftware.com/images/banerxsky2.swf\" quality=\"high\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" type=\"application/x-shockwave-flash\" width=\"125\" height=\"125\"></embed>
  </object>
</textarea>

解决方法

您可以预先设置txt_banner1的值，只需替换脚本中的producturl：

<div id=\"txt_banner1\"><a href=\'MY_NEW_URL\'><object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,19,0\" width=\"125\" height=\"125\"><param name=\"movie\" value=\"../../images/banerxsky2.swf\" /><param name=\"quality\" value=\"high\" /><embed src=\"http://www.xSkySoftware.com/images/banerxsky2.swf\" quality=\"high\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" type=\"application/x-shockwave-flash\" width=\"125\" height=\"125\"></embed></object>

脚本：

var text = $(\"#txt_banner1\").text();
$(\"#txt_banner1\").text(text.replace(\"MY_NEW_URL\",producturl);

, 唯一的答案是“您做错了”。不用担心，这很容易解决。 JavaScript不允许多行字符串。你可以写：

\"foo bar\\nbaz\"

但不是

\"foo bar
baz\"

除非您转义换行符（这不是ECMA规范的一部分，但是我测试过的所有浏览器都支持此功能）

\"foo bar\\
baz\"

做多行字符串的\“ correct \”方法是在字符串中添加换行符，但是您可以使用更多引号来模拟换行符：

\"foo bar\\n\"+
\"baz\"

是的，它很烂，但是在那里。 , 您可以将HTML代码片段放置在页面上的隐藏容器中，并按照自己喜欢的方式对其进行格式化：样式：

#html_codez { display: none }

标记：

<div id=\"html_codez\">
    <a href=\"{producturl}\">
        <object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"
            codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0\"
            width=\"125\" height=\"125\"><param name=\"movie\" value=\"../../images/banerxsky2.swf\" />
            <param name=\"quality\" value=\"high\" />
            <embed src=\"http://www.xSkySoftware.com/images/banerxsky2.swf\"
                quality=\"high\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\"
                type=\"application/x-shockwave-flash\" width=\"125\" height=\"125\">
            </embed>
        </object>
    </a>
</div>

（注意您错过的结尾the11）。然后，通过innerHTML抓取它，在大多数浏览器中，它将标准化为紧凑型HTML。如果不是在特定的浏览器上，它仍然可以使用一些正则表达式替换来清理标记之间的空白。在Chrome上，您仍然必须修剪前导和尾随空白：

var code = $.trim($(\"#html_codez\").html());

然后，您可以将其放在文本区域内：

$(\"#txt_banner1\").val(code.replace(\"{producturl}\",producturl));

, 我建议您使用一个隐藏的<div>元素将链接标记放入页面本身：

<div id=\"content\" style=\"display: none;\"><a href=\"#\">
    <object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"
            codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0\"
            width=\"125\" height=\"125\">
        <param name=\"movie\" value=\"../../images/banerxsky2.swf\" />
        <param name=\"quality\" value=\"high\" />
        <embed src=\"http://www.xSkySoftware.com/images/banerxsky2.swf\"
               quality=\"high\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\"
               type=\"application/x-shockwave-flash\" width=\"125\" height=\"125\" />
    </object>
</a></div>

然后，您可以使用jQuery克隆链接，即时修改其href属性，并使用生成的标记填充<textarea>元素：

var $content = $(\"#content\").clone();
$content.children(\"a\").attr(\"href\",producturl);
$(\"#txt_banner1\").val($content.html());

编辑：略微调整标记以获得更好的结果。小提琴在这里可用。