0

我有一个变量：

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

我想在这样的 Jquery.html函数中使用它：

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

问题是除非新内容在单行中，否则 html 函数将不起作用。这在编写 html 时是不可取的。

所以我想知道是否有办法将其var remoteControlPage转换为单行变量？

谢谢

4

5 回答 5

3

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

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

var remoteControlPage = [
    '<table>',
      '<tr>',
        '<td class="stats">sadfsadf</td>',
      '</tr>',
    '</table>'
].join('');
于 2012-09-05T02:25:23.930 回答
2

您不能像这样定义变量：

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

演示：http://jsfiddle.net/bYsTy/6/

于 2012-09-05T03:00:05.897 回答
2

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

var remoteControlPage = 
    '<table>'
      +'<tr>'
        +'<td class="stats">sadfsadf</td>'
      +'</tr>'
    +'</table>';
于 2012-09-05T02:27:12.867 回答
0

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

 $("div.devices div.devicePage").html(localStorage["bar"]);
于 2012-09-05T03:07:29.620 回答
0

您必须更换\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>): 仅当后面跟一个不是 which 空格后面跟结尾的东西时才匹配空格td

所以你的代码如下：

remoteControlPage.replace(/\n|\s(?![^\s]+<\/td>)/g, '');
console.log(remoteControlPage);
// output: <table><tbody><tr><tdclass="stats">sadfsadf</td></tr></tbody></table>

注意：它不会删除里面的空格td.stats。

演示

于 2012-09-05T02:42:02.050 回答