특정 문자를 이미지로 바꾸시겠습니까?

Question

나는 (S)를 작은 16x16 이미지로 대체하는 Javascript 코드를 가지고 싶습니다. 나는 (S)를 사용하여 내 사이트의 기사에서 내 정보 출처에 연결합니다. 조금 전문가가 아니고 지저분 해 보입니다. JS가 없어도 내 블로그에서 (S)의 모든 게시물을 내 게시물에서 16x16 이미지 나 그와 같은 문자로 자동 교체하도록하는 방법이 있는지 궁금합니다. Wikipedia에서 새 탭에 링크가 열리는 것을 보여주는 데 사용됩니다.

누구에게 아이디어가 있습니까?

편집 : 나는 그런 식으로 Blogger에서 작업합니다. HTML 코드를 수동으로 입력하는 것은 블로깅에 글을 많이 쓰는 컴퓨터 작가들도 많아서 아니오입니다.

Answer 1

나는 가지고 놀고있는 페이지에서 편집자를 얻었습니다. 입력과 동시에 업데이트되어 게시 방법에 대한 실시간 미리보기 (모든 클라이언트 측, 아약스 없음, 빠른 번개 표시)를 보여줍니다.

나는 changeup 이벤트에 응답하여이 함수를 호출한다. 당신이 필요로하는

var content; 

function byId(e) {return document.getElementById(e);} 

function onPreview() 
{ 
    var modifiedStr, re; 

    var textArea = byId("threadText"); 
    var threadTextOrig = textArea.value; 
    content = textArea; 

    re = new RegExp("\n", "g"); 
    var modifiedStr = threadTextOrig.replace(re, "<br>"); 

    re = new RegExp(":wtf:", "g"); 
    modifiedStr = modifiedStr.replace(re, '<img src="img/smiley_WTF.gif" align="top" alt="WTF | :WTF:">'); 

    re = new RegExp(":\\)", "g"); 
    modifiedStr = modifiedStr.replace(re, '<img src="img/smiley_smile.gif" align="top" alt="Smile | :)">'); 

    re = new RegExp(":-D", "g"); 
    modifiedStr = modifiedStr.replace(re, '<img src="img/smiley_biggrin.gif" align="top" alt="Big Grin | :-D">'); 

    var tgt = byId(previewDiv); 
    previewDiv.innerHTML = modifiedStr; 

    var tgt = byId('previewTitle'); 

    var src = byId('title'); 
    var srcVal = src.value; 
    tgt.innerHTML = "<strong>" + srcVal + "</strong>"; 
} 

HTML

<input name="title" id="title" value="Waiting for approval" style="width:100%" onchange="onPreview();" onkeyup="onPreview();" onmouseup="onPreview()"> 
<textarea rows="10" cols="80" id="threadText" name="threadText" onchange="onPreview();" onkeyup="onPreview();" onmouseup="onPreview()"></textarea>