Posted in HTML,PHP,JavaScript

HTML을 Javascript 코드로 변경

 Published Date: 2023년 10월 16일 
<script language="javascript">
function generateSource(form) {
  var strContent = form.HTML.value;
  strContent = strContent.replace(/\\/g, "\\\\");
  strContent = strContent.replace(/\"/g, "\\\"");
  strContent = strContent.replace(/(\r{0,1})\n/g, "\\n\\\n");
  strContent = strContent.replace(/<\/script>/gi, "<\/\",\"script>");
  var strResult = "<script language=javascript>\ndocument.write(\"\\\n" + strContent + "\");\n</" + "script>";
  form.JSSRC.value = strResult;
  return false;
}
function showResult(form, src) {
  var wopt = "menubar=yes,toolbar=yes,location=yes,scrollbars=yes,status=yes,resizable=yes";
  switch (true) {
    case form.size[1].checked: wopt += ",width=640,height=480"; break;
    case form.size[2].checked: wopt += ",width=800,height=600"; break;
    case form.size[3].checked: wopt += ",width=1024,height=768"; break;
  }
  winResult = window.open("about:blank","",wopt);
  winResult.document.open("text/html", "replace");
  switch (src) {
    case "html": winResult.document.write(form.HTML.value); break;
    case "js": winResult.document.write(form.JSSRC.value); break;
  }
  winResult.document.close();
  return false;
}
</script>
<body style="margin:0px" onLoad="document.mainform.HTML.focus()">

<table width="100%" height="500" border="0" cellspacing="0" cellpadding="4" bgColor="lightgrey">
  <form name="mainform" onSubmit="return generateSource(this)">
  <tr height="20">
    <th align="left" colspan="2">▒ HTML-JS 생성기</th>
  </tr>
  <tr height="10">
    <th width="50%">대상 HTML 소스코드</th>
    <th width="50%">HTML 출력용 JS 소스코드</th>
  </tr>
  <tr>
    <td width="50%"><textarea name="HTML" style="width:100%;height:100%"></textarea></td>
    <td width="50%"><textarea name="JSSRC" readonly style="width:100%;height:100%"></textarea></td>
  </tr>
  <tr height="20">
    <td colspan="2">
      <input type="submit" value="JS 소스코드 생성" onClick="this.form.HTML.focus()">
      <input type="button" value="HTML 미리보기" onClick="showResult(this.form,'html');this.blur()">
      <input type="button" value="JS 실행결과" onClick="showResult(this.form,'js');this.blur()">
      결과창 크기:
      <input type="radio" name="size" checked>기본
      <input type="radio" name="size">640x480
      <input type="radio" name="size">800x600
      <input type="radio" name="size">1024x768

    </td>
  </tr>
  </form>