HTML word niet omgezet naar DOM element

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • HTML word niet omgezet naar DOM element

      Beste ICTers,

      Ben vandaag op een probleempje blijven hangen en heb tot nu toe nog geen oplossing kunnen vinden.
      Het zit namelijk zo ik heb een Rainbow.js library toegevoegd om tekst op mijn website als regenboog tekst weer te geven..
      Alles werkt prima alleen worden de overige DOM elementen in de tekst niet omgezet naar het element maar naar puur tekst.

      Heb al vanalles geprobeert om dit a.h.v. enkele jQuery functies te verhelpen maar niets blijkt te werken.

      Voorbeeldje:


      De jquery $.parseHTML() functie helpt hier niet, niets verandert wanneer ik deze functie aanroep in het Rainbow.js script bij de output van de code.
      Indien iemand een oplossing zou weten voor dit probleem hoor ik het graag!

      Ik vermoed dat het een heel simpele oplossing kan zijn, helaas ontglipt mij de nodige javascript / jquery kennis om dit te kunnen fixen.


      EDIT: Probleem zit duidelijk in het feit dat deze plugin de gehele tekst een opmaak kleurtje geeft en dus worden de elementen ook apart beschouwt als tekst.
      Zoek enkel nog een manier om deze tags te strippen, onthouden en terug te plaatsen op hun juiste positie, iemand die kan helpen :P ?

      Source Code

      1. var options = $(obj).data('options');
      2. options.originalText = options.originalText.replace(/(<([^>]+)>)/ig,""); //Voorlopig stript dit alle tags uit m'n string
      3. var chars = options.originalText.split('');
      4. options.iterations++;
      5. var newstr = '';
      6. var counter = 0;
      7. for (var x in chars) {
      8. if (chars[x]!=' ') {
      9. newstr = newstr + '<span style="color: ' + options.colors[counter] + ';">' + chars[x] + '</span>';
      10. counter++;
      11. } else {
      12. newstr = newstr + ' ';
      13. }
      14. if (counter >= options.colors.length) {
      15. counter = 0;
      16. }
      17. }
      18. $(obj).html(newstr);
      Display All

      Vriendelijke groeten
      Michael
      Web developer

      The post was edited 3 times, last by MiCa- ().

    • Ben nog even verder voor je gegaan:

      JavaScript Source Code

      1. var output = document.getElementById('output').innerHTML;
      2. var input = document.getElementById('input').innerHTML;
      3. input_split = input.split(/(<.*?>)/g); // Split the script in text and html tags
      4. var text = '';
      5. for (var i in input_split) {
      6. if(/(<.*?>)/g.test(input_split[i])){ // Check if split is tag or text
      7. text += input_split[i];// if it is a htmltag do nothing
      8. }else{
      9. //Rainbow the shit out of it
      10. text += input_split[i];
      11. }
      12. }
      13. document.getElementById('output').innerHTML= text;
      Display All
      Hierbij checkt het script of het gaat om een tag of om tekst.
      Waar je //Rainbow the shit out of it. Kan je je script toevoegen om alles naar regenboog tekst te veranderen

      Op deze manier bewaar je dus je htmltags op de juist plekken en heb je daar is geen problemen mee.
      Jsfiddle: jsfiddle.net/MOnkNL/r4wqkLnt/2/

      Mvg,
      Thomas
      The law is what I write down on paper