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

Setting Textarea text to properly formatted HTML code with jQuery

本文关键字：文本 格式 HTML 代码 jQuery 区域 设置 使用      更新时间：2023-09-26

我正在尝试通过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>

讥讽的答案是"你做错了"。别担心，这是一个简单的解决方案。

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

"foo bar'nbaz"

但不是

"foo bar
baz"

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

"foo bar'
baz"

执行多行字符串的"正确"方法是在字符串中添加换行符，但您可以使用更多引号模拟换行符：

"foo bar'n"+
"baz"

是的，这很糟糕，但你有它。

您可以事先设置txt_banner1的值，只需替换脚本中的产品网址：

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

脚本：

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

您可以将截取的 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>

(请注意您错过的结束</a>。

然后，通过 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,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 属性，并使用生成的标记填充<textarea>元素：

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

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

相关文章：