Web研究ノート

  JavascriptでオリジナルタグをHTMLに変換し指定要素へ出力する

JavaScriptのRegExp（正規表現）を使うとオリジナルタグやBBコードを変換して
指定要素へ出力することができ、サーバーを介さずに簡単にプレビュー画面が実現できます。

※　(.*?)は最短マッチ
※　x = document.line.comment.value ;　変換されたテキストデータを元データで再度上書き

以下は、ArtopixBB に実装した例です

デモ　http://artopix.net/tips/extcode.html

// O'mar Iisch.Copyright(c)2011Artopix
// http://artopix.net/support/supportBB.php

function exc(q)
{
var gd=document.getElementById('extcode');
var x = document.getElementById('comment').value;
if(q==1){
r = /\n/g;
x = x.replace(r,'<br>');
r = /\[hr\]/g;
x = x.replace(r,'<hr />');
r = /\:(\w+)\:/g;
x = x.replace(r,'<img src=./img/$1.gif />');
r = /(.*?)\[A\](.*?)\[\/A\](.*?)/g;
x = x.replace(r,'$1<div class=ln>$2</div>$3');
r = /(.*?)\[b\](.*?)\[\/b\](.*?)/g;
x = x.replace(r, '$1<b>$2</b>$3');
r = /(.*?)\[i\](.*?)\[\/i\](.*?)/g;
x = x.replace(r, '$1<i>$2</i>$3');
r = /(.*?)\[u\](.*?)\[\/u\](.*?)/g;
x = x.replace(r, '$1<u>$2</u>$3');
gd.innerHTML = x;
gd.style.cssText='padding:24px;';
x = document.line.comment.value ; x.focus();
}
else{
gd.style.cssText='padding:0px;';
gd.innerHTML='';
x = document.line.comment.value ;
}
return '';
}

---- HTML ----

<div id="extcode"></div>
<form name="line">
<textarea name="comment" id="comment"></textarea>
<input type="button" value="プレビュー" onClick="exc(1); return false;" />
</form>

  2011/07/15

  追加オブジェクトからタグコードを指定範囲に挿入する

＃　テキストエリアの任意のカーソル位置や指定範囲に画像コード
　　やオリジナルタグを挿入するスクリプト…　テキストの指定範囲を
　　取得する関数を持つオブジェクトをDOMで追加すれば可能

デモ：http://artopix.net/tips/insertObject.html

／／ Set Text Code by iguchi Copyright(c)Artopix

var a='http:／／-YOURDOMAIN-/images/';
var imgs=['img1','img2','img3','img4','img5','img6'];

function addBtn() {
for(i=0;i<imgs.length;i++)
{
var setBtn = document.createElement('input');
setBtn.setAttribute('type','button');
setBtn.setAttribute('onclick','setCode("['+imgs[i]+']",document.forms.submitform.content);\treturn\tfalse;');
setBtn.style.cssText='width:25px;padding:2px;border:0px;background:url("'+a+imgs[i]+'.gif")\tno-repeat\tcenter;';
document.getElementById('imgCodeBtn').appendChild(setBtn);
}
document.getElementById('txCode').style.cssText='display:none;';
}
function setCode(tx,rfc){
if (typeof(rfc.caretPos) != "undefined" && rfc.createTextRange){
var caretPos=rfc.caretPos,buf_length=caretPos.text.length;
caretPos.text=caretPos.text.charAt(caretPos.text.length-1)==' ' ? tx+caretPos.text+ ' ' : tx+caretPos.text;
if (buf_length==0){
caretPos.moveStart("character", -tx.length);
caretPos.moveEnd("character", -tx.length);
caretPos.select();
}
else
rfc.focus(caretPos);
}
else if (typeof(rfc.selectionStart) != "undefined"){
var zen = rfc.value.substr(0, rfc.selectionStart);
var selection=rfc.value.substr(rfc.selectionStart,rfc.selectionEnd-rfc.selectionStart);
var end = rfc.value.substr(rfc.selectionEnd);
var newGetPos=rfc.selectionStart;
var scrollPos=rfc.scrollTop;

rfc.value = zen+tx+selection+end;

if (rfc.setSelectionRange)
{
　if (selection.length == 0)
　　rfc.setSelectionRange(newGetPos+tx.length, newGetPos+tx.length);
　else
　　rfc.setSelectionRange(newGetPos, newGetPos+tx.length+selection.length);
　　rfc.focus();
}
rfc.scrollTop = scrollPos;
}
else { rfc.value +=tx; rfc.focus(rfc.value.length - 1);
}
}

  2011/06/07

  IE のイベントハンドラで FireFox を動かす

／／FireFoxをIEのイベントハンドラが使えるようにする

var ie = /MSIE/.test(navigator.userAgent);
var moz = !ie && navigator.product == "Gecko";

if (moz)
{
emUEh(["click", "dblclick", "mouseover", "mouseout","mousedown", "mouseup",
"mousemove","keydown", "keypress", "keyup"]);
exTEo();
}
function emUEh(evN)
{
for (var i=0; i<evN.length; i++)
{
document.addEventListener(evN[i], function(e){window.event=e;},true);
}
}

／／ defineSetterを使ってIEと連結させる

function exTEo()
{
Event.prototype.__defineSetter__("returnValue", function(o){
if(!o) this.preventDefault();
return o;});
Event.prototype.__defineSetter__("cancelBubble", function(o){
if(o) this.stopPropagation();
return o;});
Event.prototype.__defineGetter__("srcElement", function(){
var node = this.target;
while (node.nodeType != 1) node = node.parentNode;
return node;});
Event.prototype.__defineGetter__("fromElement", function(){
var node;
if (this.type == "mouseover") node = this.relatedTarget;
else if (this.type == "mouseout" ) node = this.target;
if (!node) return;
while (node.nodeType != 1) node = node.parentNode;
return node;});
Event.prototype.__defineGetter__("toElement", function(){
var node;
if (this.type == "mouseout" ) node = this.relatedTarget;
else if (this.type == "mouseover") node = this.target;
if (!node) return;
while (node.nodeType != 1) node = node.parentNode;
return node;});
Event.prototype.__defineGetter__("offsetX", function(){
return this.layerX;});
Event.prototype.__defineGetter__("offsetY", function(){
return this.layerY;});
}

／／ Firefoxで以下のようなスクリプトが使えるようになる
／／ obj.style.left=event.clientX-offsetX+document.body.scrollLeft;
／／ obj.style.top=event.clientY-offsetY+document.body.scrollTop;

function pUp(d)
{
var x = window.event.clientX + document.body.scrollLeft;
var y = window.event.clientY + document.body.scrollTop;
d.style.display = "";
d.style.cssText = "position:absolute;z-index:100;
width:240px;height:300px;text-indent:16px;border:3px #ccc double;
color:#fff;font-family:'Century Gothic',Georgia;font-size:18px;
background:#9C93E3 url('./img/pTd.jpg') no-repeat center;";

if ((y + d.clientHeight) - document.body.scrollTop > document.body.clientHeight)
{
y = y - d.clientHeight;
if (y < document.body.scrollTop)
{
y = document.body.scrollTop;
}
}
d.style.top = y;
if ((x + d.clientWidth) - document.body.scrollLeft > document.body.clientWidth)
{
x = x - d.clientWidth;
if (x < document.body.scrollLeft)
{
x = document.body.scrollLeft;
}
}
else{
d.style.left = x;
d.style.right = x + d.clientWidth;
}
}
function uPad(){
try{
window.event.returnValue = false;
window.event.cancelBubble = true;
pUp(pTd);
}
catch(e){ return false; }
}
function nPad(){
var i = document.getElementById("pTd");
i.style.display = "none";
}

デモ：http:／／artopix.net/tips/ie_handle.html


  2011/06/05

  要素をクリック選択すると指定要素へ追加される（配列)

imgElm = function (iList){
var iEl = [];
var iAr = iList.split(",")
for(i=0;i<iAr.length;i++){
var iOb = new Image();
iOb.src = iAr[i];
iEl.push(iOb);
}
return iEl;
}
function exE(){
for(i=0;i<rtn.length;i++)
{
var temPimg = document.createElement('img');
temPimg.src = rtn[i].src;
temPimg.width = '32';
temPimg.height = '32';
temPimg.setAttribute('onclick','addElm('+(i+1)+')');
document.getElementById('north').appendChild(temPimg);
}
}
window.onload=exE;
var rtn = imgElm("img/1.jpg,img/2.jpg,img/3.jpg,img/4.jpg,img/5.jpg");

function addElm(a)
{
addImg = document.createElement('img');
switch(a){
case 1:
addImg.src='img/1.jpg';
addImg.width='32';
addImg.height='32';
addImg.setAttribute('onclick','addElm(1)');
break;
case 2:
addImg.src='img/2.jpg';
addImg.setAttribute('onclick','addElm(2)');
break;
case 3:
addImg.src='img/3.jpg';
addImg.width='48';
addImg.height='48';
addImg.setAttribute('onclick','addElm(3)');
break;
case 4:
addImg.src='img/4.jpg';
addImg.width='32';
addImg.height='128';
addImg.setAttribute('onclick','addElm(4)');
break;
case 5:
addImg.style.cssText='margin-top:20px;';
addImg.src='img/5.jpg';
addImg.width='128';
addImg.height='128';
addImg.setAttribute('onclick','addElm(5)');
break;
default:
return null;
}
orgElm = document.getElementById('north');
document.body.appendChild(addImg);
}

デモ：http:／／artopix.net/tips/array.html



  2011/06/05

  anonymous（匿名）関数の書式

anymous　関数

１．(function(){ })();

　　ex.的用法 (function(x,y){return x*y;})(3,2);


２．オブジェクトな感じ

　　var t = function(n){var h=24; return h*n;}(365)



３．ハッシュ風な味付け

　　(function(){var obj={myFunc:function(n){return String.fromCharCode(n);}}window.myObj=obj;})();

　　alert( myObj.myFunc(24859) );



＃　一般的社会人の飲み会での会話

　　document.write( "to"+ ten +"is" +( function(x,y){var i=3.36832;x*y/i;return rslt;})(to,is));



＃　アートピックス流　…　送信フォームからの文字列をinnerHTMLで書き出す

function extDoc(){(function (t){document.getElementById('getDiv').innerHTML+=t})(document.forms[0].tXt.value);}

  2011/06/05

  innerHTMLを使って簡単に実現できる動的コンテンツのサンプル

もっとも単純な例は以下のソースのように、表示させたい場所へDivタグにIDを付け
ページの読み込みと同時にHTMLを流し込んだ変数を関数で書き出すというものになります。

window.onload=function (){
var newPnl = '<form action="/index.php" method="post">'
+'<table align="center"><tr><td>Name</td>'
+'<td><input type="text" size="40" maxlength="16"></td></tr>'
+'<tr><td>Subject</td>'+'<td><input type="text" size="40">'
+'</td></tr><tr><td>comment</td>'
+'<td><textarea rows="20" cols="40"></textarea></td></tr>'
+'<tr><td> </td><td align="center">'
+'<input type="submit" value="Submit" /> <input type="reset" value="Reset" />'
+'</td></tr></table></form>';
document.getElementById('targetDiv').innerHTML=newPnl;
}

HTML
<div id="targetDiv"></div>

サンプルではフォーム部品の組み立てを動的に行うものですが
以下のように変数にオブジェクト関数を定義すると、引数を使って
フォーム部品のプロパティを変更することができます

var newForm = function (a,b){
html='<form action="/index.php" method="post">'
+'<table align="center"><tr><td>Name</td>'
+'<td><input type="text" size="40" maxlength="16"></td></tr>'
+'<tr><td>Subject</td>'+'<td><input type="text" size="40">'
+'</td></tr><tr><td>comment</td>'
+'<td><textarea rows="20" cols="40"></textarea></td></tr>'
+'<tr><td> </td><td align="center">'
+'<input type="submit" value="Submit" /> <input type="reset" value="Reset" />'
+'</td></tr></table></form>';document.write(html);
}

function x(w,h){ getDiv=document.getElementById('targetDiv'); getDiv.innerHTML=newForm(w,h);}

HTML
<body onload="x(20,40);">



createElementとappendChildを使うとボタンを押した時に、指定要素に新たな要素を追加することができます。

function addForm() {
elm = document.createElement('div');
elm.innerHTML = i+newForm ;
getDiv = document.getElementById("targetDiv2");
getDiv.appendChild(elm);
}

HTML
<input type="button" value="追加" onclick="addForm();">

また以下のようにすると引数を使ってフォームのタイトルを後から挿入することもできます。

function addForm(str)
{
var i=str;
elm = document.createElement('div');
elm.innerHTML = i+newForm ;
getDiv = document.getElementById("targetDiv2");
getDiv.appendChild(elm);
}

HTML
<input type="button" value="追加" onclick="addForm('<h1>New Form</h1>');">


  2011/06/05