Question

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

在我们的WSS调查中，我现在可以在任何我希望换行的地方使用{{br}}（这是有效的）。我已尝试扩展代码以允许使用链接标记（例如，{{link1}}网址{{link2}}网址标题{{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使用单个调用replace（）。例如，

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（）更有效。

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

2 个答案: