用图像替换某些字符？

Question

我想要做的是使用Javascript代码替换（S）小的16x16图像。我使用（S）链接到我网站上的文章中的信息来源。它看起来有点不专业和凌乱，我想知道是否有一种方法（即使没有JS）让我的博客自动替换我的帖子中的每个出现的（S）与16x16图像或像这样的字符在维基百科上用于显示链接在新标签页中打开。

有没有人有任何想法？

编辑：顺便说一句，我与Blogger合作。手动输入HTML代码也是一个禁忌，因为博客上还有其他作者，他们几乎都是计算机文盲。

Answer 1

我在一个正在玩的页面中有一个编辑器。它会在您键入时更新，显示帖子的外观预览 - 所有客户端，无ajax，快速闪电。

我调用此函数以响应keyup更改事件。 的

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>