Question

我有一个变量：

    var remoteControlPage = '
        <table>
            <tr>
                <td class="stats">sadfsadf</td>
            </tr>
        </table>
    ';

我希望在Jquery .html函数中使用它，如下所示：

    $("div.devices div.devicePage").html(remoteControlPage);

问题是html函数不会工作，除非新内容在唱歌行中。在编写html时这是不可取的。

所以我想知道是否还有将var remoteControlPage转换为单个内联变量？

由于

Answer 1

此问题并不仅限于.html() - 相反，如果没有一些帮助，JS将不支持多行字符串。

有许多模板解决方案可供您处理，但一个常见的纯JS解决方案是join一个字符串数组：

var remoteControlPage = [
    '<table>',
      '<tr>',
        '<td class="stats">sadfsadf</td>',
      '</tr>',
    '</table>'
].join('');

Answer 2

在JS中，你必须像这样正确地连接这些字符串：

var remoteControlPage = 
    '<table>'
      +'<tr>'
        +'<td class="stats">sadfsadf</td>'
      +'</tr>'
    +'</table>';

Answer 3

您无法定义如下变量：

var remoteControlPage = '
    <table>
        <tr>
            <td class="stats">sadfsadf</td>
        </tr>
    </table>
';

在任何情况下，您都可以使用带有文本

的用户填写的textarea

<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*\n\s*/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());
});

Demo: http://jsfiddle.net/bYsTy/6/

Answer 4

您必须替换\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中的空格。

demo

Answer 5

你提到html在本地存储中，所以不要使用JS变量，只是直接从存储中设置它。

 $("div.devices div.devicePage").html(localStorage["bar"]);

使用Javascript将多行变量转换为单行内联变量？

5 个答案: