En utilisant innerHTML.remplacer pour remplacer le texte pour créer le lien

Je suis à l'aide de Sharepoint (WSS 3.0), qui est malheureusement très limité dans sa capacité à formater les questions de l'enquête (c'est à dire, il supprime les balises HTML que vous entrez). J'ai vu une solution ailleurs que nous a suggéré d'ajouter un peu de JS pour notre fichier de page maître, afin de permettre des sauts de ligne. Cela fonctionne à merveille, mais j'aimerais voir si nous pouvons nous permettre de liens.

Dans notre WSS enquêtes, je peux maintenant utiliser {{br}} d'où je veux un saut de ligne (cela fonctionne). J'ai essayé d'étendre le code pour permettre l'utilisation de balises link (par exemple, {{link1}}url{{link2}}Titre de l'URL{{link3}}; mais, cela ne fonctionne pas, sans doute parce que les mises à jour ne se passent pas comme un tout, et le navigateur, puis essaye de rendre morceau par morceau, de le confondre. (FF et IE montrent des résultats différents, mais tous deux échouent. Si je mélange de l'ordre de la JS ci-dessous -- c'est à dire, ne link3, 2 puis 1 -- la sortie des changements, mais ne fonctionne toujours pas.) Est-il une meilleure façon de le faire?

<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>
InformationsquelleAutor Mark | 2009-05-19
  1. 5

    Au lieu de modifier la propriété innerHTML en morceaux (le navigateur tente de mettre à jour le DOM chaque fois que vous changez de innerHTML, qui, si vous incomplète/cassé balisage, sera bien évidemment gâcher les choses), faire toutes vos modifications à l'encontre de votre propre variable de chaîne, puis remplacer l'ensemble de la innerHTML avec votre chaîne:

    <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>
    • Cela fait sens, mais il semble comme si j'avais alors besoin de tirer l'URL entre les {{link1}} et {{link2}} les balises et le titre de entre le {{link2}} et {{link3}} les balises dans l'ordre pour former l'ensemble de la liaison et de remplacer tout à la fois. Pardon pour mon ignorance, mais savez-vous comment je pourrais y arriver?
    • innerHTML est essentiellement rien de plus qu'une chaîne, donc tout ce que vous faites avec newHTML est de manipuler une chaîne de caractères. C'est seulement analysé et mis dans les DOM une fois que vous manipuler l'élément innerHTML.
    • Bon, je crois que je comprends au moins à un niveau élevé. (Et merci à tous pour vos réponses rapides.) Quand j'ai ajouter le code ci-dessus/ci-dessous, je me retrouve avec une poignée de "undefined" des morceaux de texte sur mon WSS pages (sur toutes les pages, pas seulement ceux avec {{lien}} tags). Il semble avoir quelque chose à faire avec " var newHTML = elements[e].innerHTML;', comme si je commente cette ligne, les erreurs disparaissent (mais bien sûr, rien n'est alors remplacé). Des idées?
    • mon code et votre code sont en train de faire exactement la même chose. Dans cet exemple particulier, vous ne devez pas tirer quoi que ce soit à partir de n'importe où, en supposant que vous écrivez vos jetons tels que {{link1}} et {{link2}} toujours placer l'URL. Il ne sera pas de support plus robuste des cas comme @Daniel deuxième exemple, mais il va faire le travail.
    • vous devriez vérifier que les éléments de[e] en fait, existe et a des enfants avant d'essayer de faire quelque chose avec elle.
    • Hah. J'ai été celui qui a foiré. J'ai maintenant cela fonctionne à merveille. Rex, Daniel -- je VOUS REMERCIE. C'est génial. Beaucoup, beaucoup apprécié.

    InformationsquelleAutor Rex M
  2. 3

    La réponse la plus simple serait de construire le innerHTML et de le remplacer une fois pour toutes:

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

    La plus complexe, la réponse devrait être d'utiliser la capture des groupes dans votre regex et passer une fonction comme le 2e paramètre de remplacer les(), de sorte que l'utilisation d'un seul appel à remplacer() pour le HTML. Par exemple,

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

    La deuxième solution est plus complexe et conduit à des moches, les regexes, mais il est plus efficace que d'appeler replace (), encore et encore.

    • Drôle, nous avons écrit presque exactement le même code en même temps.
    • En quelque sorte, j'ai posté la réponse la plus simple a travaillé ensuite dans les plus complexes de la réponse dans l'intervalle.
    InformationsquelleAutor Dan Lew