Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>データを配列で書くのが面倒なので、改行区切りの文字列をHTMLに埋め込んで配列に変換する [jQuery版]</title>
</head>
<body>
  <ul id="output"></ul>
​
  <!-- 改行区切りの文字列をHTMLに埋め込み、JavaScriptで配列に変換する -->
  <!--
  注意：type属性を省略したり、「text/javascript」「application/javascript」などと書いたりしてはいけません。
  もし書いてしまうと、JavaScriptと解釈されてしまい、エラーが出てしまいます。
  また、src属性でこのような「独自形式」のテキストデータを読み込まないようにしてください。
  src属性で読み込めるのはJavaScriptのファイルだけです。
  このため、「独自形式」のテキストデータはこのような感じでHTMLに直接書く必要があります。
  -->
  <script type="text/x-dialogue-data" id="dialogue_data">
    あいうえお
    かきくけこ
    さしすせそ
    たちつてと
    なにぬねの
    はひふへほ
    まみむめも
    やゆよ
    らりるれろ
    わゐゑを
    ん
  </script>
​
  <hr>
​
  <a href="http://output.jsbin.com/tixuho">Vanilla JS版</a>
​
  <!-- jQuery読み込み -->
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
​
 
/*
 * HTMLでscript要素に埋め込んだ文字列を取得する。
 */
var dataText = $("#dialogue_data").text();
​
/*
 * 埋め込んだ文字列を配列に変換する。
 */
var dialogueList = $.map(dataText.split(/\r\n?|\n/), function(str) {
  /* 配列の要素の前後からスペースを取り除く */
  var newStr = $.trim(str);
​
  /*
   * 要素が空文字列の場合、nullを返して配列から削除
   */
  if (newStr !== "") {
    return newStr;
  } else {
    return null;
  }
});
​
/*
 * 変換された配列をコンソールに表示
 */
if (window.console && window.console.log) {
  console.log(dialogueList);
}
​
/*
 * 配列の内容を順番にul要素の中に追加し、表示する。
 */
var outputElem = $("#output");
$.each(dialogueList, function(_, str) {
  var liElem = $("<li>").text(str);
  outputElem.append(liElem);
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sounisi5011pro
0viewers