使用innerHTML.replace替换文本来创建链接

Question

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

在我们的 WSS 调查中，我现在可以在任何需要换行的地方使用 {{br}}（这有效）。 我尝试扩展代码以允许使用链接标签（例如，{{link1}}url{{link2}}URL Title{{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>

Answer 2

简单的答案是构建innerHTML并立即替换它：

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;
    }
}

更复杂的答案是在正则表达式中使用捕获组并将函数作为第二个参数传递给replace()，以便使用单个调用来替换 HTML 的（）。 例如，

elements[e].innerHTML = elements[e].innerHTML.replace(/({{link1}})|({{link2}})|({{link3}})/g, 
    function (match) {
        var map = { 
            '{{link1}}' : '<a href="',
            '{{link2}}' : '>',
            '{{link3}}' : '</a>', }
        return map[match];
    });

第二个解决方案更复杂并导致一些丑陋的正则表达式，但比一遍又一遍地调用replace()更有效。