如何解决使用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());
编辑:略微调整标记以获得更好的结果。小提琴在这里可用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。