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に埋め込んで配列に変換する</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/zehiwe">jQuery版</a>
</body>
</html>
​
 
/*
 * HTMLでscript要素に埋め込んだ文字列を取得する。
 */
var dataText = document.getElementById("dialogue_data").textContent;
​
/*
 * 埋め込んだ文字列を配列に変換する。
 */
var dialogueList = dataText
  /* 改行ごとに分割し、配列化 */
  .split(/\r\n?|\n/)
​
  /* 配列の要素の前後からスペースを取り除く */
  .map(function(str) {
    return str.trim();
  })
​
  /* 空文字列の要素は配列から除外する */
  .filter(function(str) {
    return str !== "";
  });
​
/*
 * 変換された配列をコンソールに表示
 */
if (window.console && window.console.log) {
  console.log(dialogueList);
}
​
/*
 * 配列の内容を順番にul要素の中に追加し、表示する。
 */
var outputElem = document.getElementById("output");
dialogueList.forEach(function(str) {
  var liElem = document.createElement("li");
  liElem.textContent = str;
  outputElem.appendChild(liElem);
});
​
Output 300px

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

Dismiss x
public
Bin info
sounisi5011pro
0viewers