javascript - 使用 innerHTML.replace 替换文本以创建链接

Question

我正在使用 Sharepoint (WSS 3.0)，不幸的是，它在格式化调查问题方面的能力非常有限(即，它会去除您输入的任何 HTML)。我在其他地方看到了一个解决方案，它建议我们将一些 JS 添加到我们的母版页文件中以允许换行。这很好用，但我想看看我们是否也可以允许链接。

在我们的 WSS 调查中，我现在可以在任何需要换行的地方使用 {{br}}(这很有效)。我尝试扩展代码以允许使用链接标签(例如，{{link1}}url{{link2}}URL 标题{{link3}}；但是，这不起作用，大概是因为更新不是作为一个整体发生，然后浏览器尝试逐个渲染它，混淆它。(FF 和 IE 显示不同的结果，但都失败了。如果我混淆了下面 JS 的顺序——即，执行 link3、2然后是 1——输出也发生变化，但仍然失败。)有没有更好的方法来做到这一点？

---

<script language="JavaScript">
var className;
className = 'ms-formlabel';
var elements = new Array();
var elements = document.getElementsByTagName('td');
for (var e = 0; e < elements.length; e++)
{
if (elements[e].className == className){
elements[e].innerHTML = elements[e].innerHTML.replace(/{{br}}/g,'<br/>');
elements[e].innerHTML = elements[e].innerHTML.replace(/{{link1}}/g,'<a href="');
elements[e].innerHTML = elements[e].innerHTML.replace(/{{link2}}/g,'">');
elements[e].innerHTML = elements[e].innerHTML.replace(/{{link3}}/g,'</a>');}
}
</script>

Answer 1

与其分块修改 innerHTML 属性(浏览器会在您每次更改 innerHTML 时尝试更新 DOM，如果您提供不完整/损坏的标记，显然会把事情搞砸)，请针对您自己的字符串变量进行所有修改，然后用您完成的字符串覆盖整个 innerHTML:

<script language="JavaScript">
var className;
className = 'ms-formlabel';
var elements = new Array();
var elements = document.getElementsByTagName('td');
for (var e = 0; e < elements.length; e++)
{
if (elements[e].className == className) {
    var newHTML = elements[e].innerHTML;

    newHTML = newHTML.replace(/{{br}}/g,'<br/>');
    newHTML = newHTML.replace(/{{link1}}/g,'<a href="');
    newHTML = newHTML.replace(/{{link2}}/g,'">');
    newHTML = newHTML.replace(/{{link3}}/g,'</a>');}

    elements[e].innerHTML = newHTML;
}
</script>