javascript - 用图像替换某些字符？

Question

我想做的是有一个 Javascript 代码，用一个 16x16 的小图像替换 (S)。我使用 (S) 链接到我网站上文章中的信息来源。它看起来有点不专业和凌乱，我想知道是否有办法（即使没有 JS）让我的博客自动用 16x16 图像或类似的字符替换我帖子中出现的 (S)在 Wikipedia 上用于显示链接在新选项卡中打开。

有没有人有任何想法？

编辑：顺便说一下，我和 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>