JavaScript HERE-doc 或其他大引用机制？

Question

有没有一种方便的方法来引用 JavaScript 中同时包含单引号和双引号的一大块 HTML？

是否有类似 HERE-doc <、多引号字符 """ 或自定义分隔符 q{} ？

对于这个问题有什么创造性或创造性的解决方案吗

Answer 1

有些人不喜欢这样，所以要做好被蔑视和嘲笑的准备，但一个技巧是将你的“大块东西”转储到

<script id='blockOfStuff' language="text">
  Hi this is random stuff
  <h1>Including HTML markup</h1>
  And quotes too, or as one man said, "These are quotes, but
  'these' are quotes too."
</script>

John Resig 在他的模板机制示例中使用了这种技术（或者是令人厌恶的技术，如果你愿意的话）。

您可以根据需要使用“innerText”或“innerHTML”获取内容，或者通过您喜欢的框架的服务获取内容。

编辑 - 请注意，通过 jQuery（与我在下面的评论中所说的相反）.text() 确实不起作用，尽管我认为它可以应该。请改用 .html() 。

Answer 2

原生不支持。

但既然我们正在讨论让它发挥作用的方法，那么（根据我的经验）可以这样做：

<script type="text/javascript">  

    var name = "Mud";

    var str = "\
        My name is " + name + "\
        not to be confused with Bill\
        or Jack or Pete or Dennis\
        my name is " + name + " and it's always been\
    ";

    alert("Les'n one: " + str);

</script>

那些反斜杠就可以了。只需确保反斜杠转义字符串中的所有双引号，因为整个块都用它们引用。

请注意，这不会保留换行符，您必须在每行的尾部斜杠之前手动将它们插入为“\n”。另一方面，每行开头的任何空白缩进都将包含在输出中。

事实上，当您必须在脚本（例如 XML）中声明一个长的多行字符串时，这种方法效果最好，而当您需要保持该字符串的格式与您定义的方式完全相同时，这种方法就不太好了。

干杯

Answer 3

JavaScript 无法做到这一点，但 CoffeeScript 是 JavaScript 之上的一个薄层，能。

点击链接并向下滚动到“多行字符串和此处文档”。

Answer 4

我记得不久前看到一个聪明的解决方案，在函数中使用多行注释：

(function () {
   /*
      "This is an example of a multi-line string.  It's really just a mult-line
      comment, and it's wrapped in quote marks.  You might also notice the 
      apostrophe's ;-)"; 
   */
});

注意：最后一个撇号是故意不正确的 ;-P

技巧是调用函数的 toString() 方法并解析使用正则表达式输出多行注释。很聪明，但很像波蒂的建议，有点令人厌恶。

我实际上并不认为这个问题是在为生产用途寻找一种真正可行的方法——这是我自己过早下结论的错误——我不太确定为什么你不直接转义相关的字符串文字分隔符。正如 Tim Down 在下面的评论中指出的那样，ECMAScript 第三版将函数的 toString() 定义为依赖于实现的函数。

为了好玩，我决定检查一下浏览器兼容性，这种方法在 IE、Opera、Safari 和 Chrome 中可行，但在 Firefox 中不可行，因为火狐在返回的字符串中不包含注释。 http://jsfiddle.net/2yvXG/

Answer 5

ECMAscript 6，现在的标准，允许使用反引号（重音符号）
引用多行文字字符串。不幸的是，这不是
IE 11 支持，因此不应在大多数网站上使用。
（图片来源：Adam Katz，上）

示例：

var str=
`Line 1
Line 2`;

Answer 6

HereDoc For JavaScript

FuncToHereDoc（“delemiter”，带有注释的 HEREDOC 的未调用函数）

function FuncToHereDoc(here,str) {
    var reobj = new RegExp("/\\*"+here+"\\n[\\s\\S]*?\\n"+here+"\\*/", "m");
    str = reobj.exec(str).toString();
    str = str.replace(new RegExp("/\\*"+here+"\\n",'m'),'').toString();
    return str.replace(new RegExp("\\n"+here+"\\*/",'m'),'').toString();
}

用法：

FuncToHereDoc("HERE", MyHereDoc);

function MyHereDoc(){
/*HERE
<p>
This is written ing the HEREDOC, notice the multilines :D.
</p>
<p>
HERE
</p>
<p>
And Here
</p>
HERE*/
}

Answer 7

我实际上设计了一个类似于 user742675 的笨拙变体，您将文本放在 div 中，然后将其可见性设置为无，然后提取内容。但仅仅引用大量 HTML 是不够的，所以我添加了一个功能来获取您在脚本中声明的所有变量，因此如果您有 var a = 'Steve'，则任何此处文档文本中 $a 的实例将呈现为“Steve”。

<script type="text/javascript">
// set variables named andy and handy, which we can use as $andy and $handy in our text

var andy = "Fred Flintstone";
var handy = "Steve Austin";

function hereDoc(divid){
var obj = window; // gets an object containing all the variables
var str = document.getElementById(divid).innerHTML; // gets the HTML block
for(var i in obj){

/* the for loop recurses through all the objects in the page - remember strings are objects in Javascript */

if((typeof(obj[i])=="string")||(typeof(obj[i])=="number")){

/* Type of makes sure it only executes replacement for strings and numbers. The function worked without this test in Firefox and Safari, but threw errors on Opera until it was added. */

myregex = new RegExp('\\
+i,"g");

/* To replace globally, you need to use a regular expression and use the "g" option, but within the string.replace() method, the regular expression is unquoted, so you can't use a variable in it directly. So we create it and assign it to a RegExp object that works in the string.replace() method. */

str = str.replace(myregex, obj[i]);

/* we replace instances of the variable name with a dollar sign before it with the variable's value */
}
}
return str;

/* and when the loop is done, we return the processed text to be used however needed */

}

function gotoit(){

/* fill the "steve" div with the processed contents of the "randy" div. */

document.getElementById("steve").innerHTML = hereDoc("randy");
}

</script>

<a href="javascript:gotoit();">Run the script</a>
<div id="randy" style="display:none;">
The interesting thing about $andy is that he's not nearly as popular with young kids as $handy.<br><br>

What I really find 'interesting' is that this "multiline" thing works as well as $handy's bionic arm. <br><br>
</div>
<div id="steve"></div>

Answer 8

根据之前的答案和不同的用例，这里有一个小例子：

https://gist.github.com/拉瓦耶尔/5880516

/*!
 * Extract a function's comment, useful to have multiline string
 * @link https://gist.github.com/lavoiesl/5880516
 *
 * Don't forget to use /*! to avoid the comment being removed in minification 
 */

function extractFuncCommentString(func) {
  var matches = func.toString().match(/function\s*\(\)\s*\{\s*\/\*\!?\s*([\s\S]+?)\s*\*\/\s*\}/);
  if (!matches) return false;

  return matches[1];
}

var myString = extractFuncCommentString(function(){/*!
  <p>
    foo bar
  </p>
*/});

Answer 9

我对这个问题感兴趣，因为我想使用 javascript 将新行添加到编辑屏幕（例如，对于多个电话号码）。 （我可以为此使用 ajax，但想避免额外的服务器请求。）

我喜欢 Pointy 关于使用标签来包含要使用的 html 块的答案：

<script id='blockOfStuff'>
  Hi this is random stuff
  <h1>Including HTML markup</h1>
</script>

但是当我尝试这样做时，Firefox 和 Chrome 抱怨语法错误。我的解决方案是将“script”标签更改为“div”，通过 CSS 对用户隐藏其显示，并将其移动到正文中。例如：

<div style="display: none;" id="new_row_innerhtml">
  <td><a href="#" onclick="removeCurrentRow(this); return false;">Remove</a></td>
  <input type="hidden" name="id[]" value="new" />
  <td><input name="name[]" type="text" /></td>
</div>

That removed the syntax errors.

Here's how I used that block:

I had an "Add" link that called the appendRow function:
<a href="#" onclick="appendRow(this); return false;">Add</a>

here's the appendRow function:

function appendRow() {
  var tbl = document.getElementById('my_table');
  var row = tbl.insertRow(-1); // add to end of table
}

Answer 10

// js heredoc - http://stackoverflow.com/a/32915549/466363
// a function with comment with eval-able string, use it just like regular string

function extractFuncCommentString(func,comments) {
  var matches = func.toString().match(/function\s*\(\)\s*\{\s*\/\*\!?\s*([\s\S]+?)\s*\*\/\s*\}/);
  if (!matches) return undefined;
  var str=matches[1];

   // i have made few flavors of comment removal add yours if you need something special, copy replacement lines from examples below, mix them
  if(comments===1 )
  {
   // keep comments, in order to keep comments  you need to convert /**/ to / * * / to be able to put them inside /**/ like /*    / * * /    */
   return (
    str
   .replace(/\/\s\*([\s\S]*?)\*\s\//g,"/*$1*/") //       change   / * text * /  to   /* text */ 
   )
  }
  else if(comments===2)
  {
   // keep comments and replace singleline comment to multiline comment
   return (
    str
   .replace(/\/\s\*([\s\S]*?)\*\s\//g,"/*$1*/") //       change   / * text * /  to   /* text */ 
   .replace(/\/\/(.*)/g,"/*$1*/")          //           change   //abc to  /*abc*/
   )
  }
  else if(comments===3)
  {
   // remove comments
   return (
      str
      .replace(/\/\s\*([\s\S]*?)\*\s\//g,"") //       match / * abc * /
      .replace(/\/\/(.*)/g,"")             // match //abc
     )
  }
  else if(comments===4)
  {
   // remove comments and trim and replace new lines with escape codes
   return (
      str
      .replace(/\/\s\*([\s\S]*?)\*\s\//g,"") //       match / * abc * /
      .replace(/\/\/(.*)/g,"")             // match //abc
      .trim() // after removing comments trim and:
      .replace(/\n/g,'\\n').replace(/\r/g,'\\r') // replace new lines with escape codes. allows further eval() of the string, you put in the comment function: a quoted text but with new lines
     )
  }
  else if(comments===5)
  {
   // keep comments comments and replace strings, might not suit when there are spaces or comments before and after quotes 
   // no comments allowed before quotes of the string
   // url html links
   return (
      str
      .replace(/\/\s\*([\s\S]*?)\*\s\//g,"/*$1*/") //       change   / * text * /  to   /* text */
      .replace(/\/\/(.*)/g,"/*$1*/")          //           change   //abc to  /*abc*/
      .trim() // trim space around quotes to not escape it and:
      .replace(/\n/g,'\\n').replace(/\r/g,'\\r') // replace new lines with escape codes. allows further eval() of the string, you put in the comment function: a quoted text but with new lines
     )
  }
  else if(comments===6)
  { // good for html with links
   // remove comments and trim and replace new lines with escape codes
   return (
      str
      .replace(/\/\s\*([\s\S]*?)\*\s\//g,"") //       match / * abc * /
      .trim() // after removing comments trim and:
      .replace(/\n/g,'\\n').replace(/\r/g,'\\r') // replace new lines with escape codes. allows further eval() of the string, you put in the comment function: a quoted text but with new lines
     )
  }
  else 
  return str
}

简单

var week=true,b=123;
var q = eval(extractFuncCommentString(function(){/*!

// this is a comment     


'select 

/ * this
is a multiline 
comment * /

 a
,b  // this is a comment  
,c
from `table`
where b='+b+' and monthweek="'+(week?'w':'m')+'" 
//+' where  a=124
order by a asc
'
*/},4));

缓存示例： - 制作一个简单的模板函数，并保存该函数：

var cache={};
function myfunction(week,a){


    if(!cache.myfunction_sql1) eval('cache.myfunction_sql1=function(week,a){return ('+extractFuncCommentString(function(){/*!
'select 

/ * this
is a multiline 
comment * /

 a
,b  // this is a comment  
,c
from `table`
where b='+b+' and monthweek="'+(week?'w':'m')+'" 
//+' where  a=124
order by a asc

'*/},4)+')}');
    q=cache.myfunction_sql1(week,a);
    console.log(q)
}
myfunction(true,1234)

文本（未评估）：

//var cache={};
function myfunction2(week,a){


    if(!cahce.myfunction_sql2) cahce.myfunction_sql2=extractFuncCommentString(function(){/*!

some multiline text
with <html>
and a link://to.url
and a / * comment * / 
*/},6);
    q=cahce.myfunction_sql2;
    console.log(q)
}

Answer 11

这是你的答案。在页面正文中创建一个 span 或 div，无论是哪个，都可以使用唯一的 id，并将所需的所有文本以及所需的所有引号放入其中。将 span 或 div 的样式设置为“display:none;visibility:hidden;”。然后，当您需要时，它会从 id 获取 DOM 对象，并检索innerHTML 来执行您想要的操作。