我有一个变量:
var remoteControlPage = '
<table>
<tr>
<td class="stats">sadfsadf</td>
</tr>
</table>
';
我想在Jquery .html
函数中使用它,如下所示:
$("div.devices div.devicePage").html(remoteControlPage);
问题是,除非新内容在一行中,否则html函数将无法工作。这在编写html时是不可取的。
所以我想知道是否有办法将var remoteControlPage
转换为单行变量?
感谢
这个问题不仅限于.html()
,相反,如果没有一些帮助,JS将不支持多行字符串。
有许多模板化解决方案可供您处理,但一个常见的纯JS解决方案是join
字符串数组:
var remoteControlPage = [
'<table>',
'<tr>',
'<td class="stats">sadfsadf</td>',
'</tr>',
'</table>'
].join('');
您不能定义这样的变量:
var remoteControlPage = '
<table>
<tr>
<td class="stats">sadfsadf</td>
</tr>
</table>
';
在任何情况下,您都可以有一个文本区域,由用户用文本填充
<table>
<tr>
<td class="stats">sadfsadf</td>
</tr>
</table>
然后你得到它:
var remoteControlPage = mytextarea.value;
但当你这样做时,文本会更改为
var remoteControlPage = "<table>n <tr>n <td class="stats">sadfsadf</td>n </tr>n</table>"
然后,如果你想删除换行符,你可以做
remoteControlPage = remoteControlPage.replace(/s*ns*/g,"")
但你不需要。如果你说用户将编写HTML,你可以使用<textarea>
。。。
<textarea id="txt">
<table>
<tr>
<td class="stats">Cell 1</td>
<td class="stats">Cell 2</td>
</tr>
</table>
</textarea>
一个按钮。。。
<button id="button">Click me!</button>
和一个输出HTML查看器:
<div id="output">Here will go the output</div>
然后你只需要
$('#button').click(function(){
$('#output').html($('#txt').val());
});
演示:http://jsfiddle.net/bYsTy/6/
在JS中,你必须像这样正确地连接这些字符串:
var remoteControlPage =
'<table>'
+'<tr>'
+'<td class="stats">sadfsadf</td>'
+'</tr>'
+'</table>';
您必须更换n
remoteControlPage = remoteControlPage.replace(/n/g, '');
console.log(remoteControlPage);
// output: "<table> <tbody><tr> <td class="stats">sadfsadf</td> </tr> </tbody></table>"
或者,如果您不需要空白,可以使用以下regex
将其删除。/n|s(?![^s]*</td>)/g
解释:
s
:匹配空白|
:用于匹配n
或s
[^s]
:匹配除空白以外的所有内容</td>
:匹配您的td
的末尾*
:匹配前面的元素0次或更多次s(?![^s]*</td>)
:仅当后面跟的不是某个空格时匹配空白,后面跟td
的末尾
因此您的代码如下:
remoteControlPage.replace(/n|s(?![^s]+</td>)/g, '');
console.log(remoteControlPage);
// output: <table><tbody><tr><tdclass="stats">sadfsadf</td></tr></tbody></table>
注意:它不会删除td.stats
内部的空白。
演示
您提到html在本地存储中,所以不要使用JS变量,直接从存储中设置它。
$("div.devices div.devicePage").html(localStorage["bar"]);