Verwenden von innerHTML.replace, um Text zu ersetzen, um einen Link zu erstellen

Question

Ich verwende Sharepoint (WSS 3.0), der leider nur sehr begrenzt in der Lage ist, Umfragefragen zu formatieren (d. H. Es streift jeden eingegebenen HTML-Code). Ich sah eine Lösung an anderer Stelle, die vorschlug, dass wir unserer Masterseitendatei einige JS hinzufügen, um Zeilenumbrüche zu ermöglichen. Das funktioniert wunderbar, aber ich würde gerne sehen, ob wir auch Links zulassen können.

In unseren WSS-Umfragen kann ich jetzt {{br}} überall dort verwenden, wo ich einen Zeilenumbruch haben möchte (funktioniert). Ich habe versucht, den Code zu erweitern, um die Verwendung von Link-Tags zu ermöglichen (zB {{link1}} url {{link2}} URL-Titel {{link3}}, aber dies funktioniert nicht, vermutlich weil die Updates nicht sind passiert als Ganzes, und der Browser versucht dann, es Stück für Stück zu rendern, es zu verwirren. (FF und IE zeigen unterschiedliche Ergebnisse, aber beide scheitern. Wenn ich die Reihenfolge des JS unten verwechsle - also link3, 2 und dann 1 - der Ausgang ändert auch, aber immer noch nicht) gibt es einen besseren Weg, dies zu tun

---

<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

Statt die Eigenschaft innerhtml in Stücke zu modifizieren (der Browser zu aktualisieren versucht das.? DOM jedes Mal, wenn Sie innerHTML ändern, was, wenn Sie unvollständiges/gebrochenes Markup liefern, wird offensichtlich Dinge durcheinander bringen), machen Sie alle Ihre Änderungen ns gegen die eigene String-Variable, und dann die gesamte innerHTML- mit dem ausgefüllten Zeichenfolge überschreibt:

<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

Die einfache Antwort wäre, die innerHTML- aufzubauen und ersetzt sie alle auf einmal:

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

Der Eine komplexere Antwort wäre die Verwendung von Erfassungsgruppen in Ihrer Regex und die Übergabe einer Funktion als zweiten Parameter an replace(), um einen einzigen Aufruf von replace() für den HTML-Code zu verwenden. Zum Beispiel

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

Die zweite Lösung ist komplexer und führt zu einigen hässlichen reguläre Ausdrücke, aber ist effizienter als ersetzen() aufrufen, immer und immer wieder.