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

Convert multi-lined variable into a single lined variable using Javascript?

本文关键字：变量 转换 单行 Javascript 使用      更新时间：2023-09-26

我有一个变量：

    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*'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/

在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"]);
相关文章：