使用 jQuery 将 Textarea 文本设置为格式正确的 HTML 代码

Question

我正在尝试通过 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,0,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,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>');

编辑2：这是我的文本区域代码：

<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,19,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>

Answer 1

讽刺的答案是“你做错了”。别担心，这很容易解决。

JavaScript 不允许多行字符串。你可以写：

"foo bar\nbaz"

但不能

"foo bar
baz"

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

"foo bar\
baz"

处理多行字符串的“正确”方法是向字符串添加换行符，但是你可以用更多的引号来模拟换行符：

"foo bar\n"+
"baz"

是的，它很糟糕，但是你已经有了它。

Answer 2

您可以预先设置 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,0,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>

script:

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

Answer 3

您可以将截取的 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,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>
    </a>
</div>

请注意您错过的结束 。）

然后，抓住它通过 innerHTML，在大多数浏览器中，它会被标准化为紧凑的 HTML。如果在特定浏览器上没有，您仍然可以使用一些正则表达式替换来清理标记之间的空白。在 Chrome 上，您仍然需要修剪前导和尾随空白：

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

然后您可以将其放置在文本区域中：

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

Answer 4

我建议您使用隐藏的

元素将链接标记放在页面本身中：

<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,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" />
    </object>
</a></div>

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

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

编辑：稍微调整标记以获得更好的结果。 Fiddle 可用此处。