0)
블로그를 사용하다보면, 여러개 이미지를 한줄에 표시해야할 때가 있는데요,

이미지를 올리다보면, 자리변경(?)도 다시 해봐야하고,
크기를 얼마로 맞춰야할지 잊어먹는 경우가 있어서요..

1)
그래서, 이미지 갯수가 2개 이상일 때
해당 줄(?) 내의 이미지 크기를 조정하도록

IE8 기준으로 만들어봤습니다.

가로 기준값은 700 으로 했습니다.

..

2)

<script>
function execThis130915_1(srcv) {
  var
    s1=srcv.innerText
  , outv=document.getElementById('outv130915_1')
  , ev1=/(^|<br\s*\/?>|<p(\s+[^>]+)*\s*>)(([^<]+|<(?!br[\s>/]|\/?p[\s>])[^>]+>)+)($|<br\s*\/?>|<\/p(\s*[^>]+)*>)/i
  , ev2=/<img\s*style="[^w]+width:[^;]+;[^;]+;[^"]+"\s*src="[^"]+"\s*\/?>/i
  , ev3=/(<img)(\s*style="[^w]+)(width:[^;]+;[^;]+;)([^"]+"\s*src="[^"]+"\s*\/?>)/gi
  , rv1, rv2, cv, ov=''
    ;

  while (rv1=ev1.exec(s1)) {

    s2=rv1[3]; cv=0;
    while (rv2=ev2.exec(s2)) {
      cv++;
      s2=s2.substring(rv2.lastIndex, s2.length);
      }

    if (cv>=2) {
      ov+=s1.substring(0, rv1.lastIndex-rv1[0].length)+rv1[1]+rv1[3].replace(ev3, '$1 width={wv}$2$4'.replace(/{wv}/, parseInt(700/cv)) )+rv1[5]; }
    else ov+=rv1[0];

    s1=s1.substring(rv1.lastIndex, s1.length);
    }

  outv.innerText=ov;
  }
</script>
<table><tr><td>
src<br/>
<textarea id=srcv onclick=execCommand('selectAll');execCommand('Paste');execThis130915_1(this); style="width:400px; height:400px;" ></textarea>
</td><td>
out<br/>
<textarea id=outv130915_1 onclick=execCommand('selectAll');execCommand('Copy'); style="width:400px; height:400px; background-color:#eeeeee;" ></textarea>
</td></tr></table>


-- 새 창에 띄우기.. --

..

3)

src
out


..

4)
regExp 와 HTML 소스 조정법으로

왼쪽을 클릭하면 복사해둔 HTML 소스 Text 를 붙여넣도록 해놨구요,
오른쪽을 클릭하면, 변환해둔 HTML 소스 Text 를 클립보드에 복사하도록 해놨습니다.
( onclick=execCommand(..);.. 부분..)

5)
.. 문제는, regExp 를 사용하면서 탐색식이 좀 복잡한(?) 까닭에,
중간에 멈추는 경우가 종종 있더라구요.
(<br 태그와 <p 태그로 구분하도록 설정해놨죠..)

제작 의도(?)에 가까이 하기위해서 개선해야할 바탕은 그 부분이 아니겠지만,
.. 이후 더 개선해봐야 한다는 생각은 나게된 결과였죠.

..

wantHate killofki@.

Posted by killofki
,