AngularJS: Konvertieren einer Zeichenfolge in eine HTML-Vorlage mit Direktive

Question

Ich arbeite an einem Webanwendungsprojekt. Als ich vor 1 Jahr anfing, war ich ein absoluter Anfänger in der Programmierung (ich wusste nichts j.s.). Jetzt bin ich am Rande der Veröffentlichung, aber es fehlt die größte Funktion.

Das Projekt wurde mit Angular 1.5 entwickelt. Es ist eine editierbare WYSIWYG-Wiki-Anwendung, um eine Fantasiewelt zu präsentieren: Ich schreibe einen Artikel und poste ihn. Dieser Artikel enthält Sätze bestehend aus:
=> Standardtexte
=> klickbare Links.
=> Dieser klickbare Link öffnet ein Popup mit einer kleinen Definition
=> Dieses Popup enthält einen «mehr wissen» Link
=> das «mehr Link wissen» verweist auf einen anderen (url) Artikel.

Und das ist mein Problem: Ich weiß nicht, wie es geht. Hier ist die Art und Weise der Text formatiert ist:

var str = "Circa hos dies #Lollianus primae~lollianus# 
lanuginis adulescens, tribus pacataeque centuriae et 
#nulla suffragiorum~nullasuffragiorum# 
certamina set Pompiliani redierit securitas temporis"; 

ich die Zeichenfolge zwischen den # Zeichen aufnehmen möchten, dann diese Zeichenfolge aufgeteilt in 2: der Text vor dem Tilde-Zeichen ist, kommt der Link. Ich möchte die Ausgabe wie folgt aussehen:

<span> Circa hos dies </span> 
<a popup-directive link="lollianus" > Lollianus primae </a> 
<span> lanuginis adulescens, </span> 
<span> tribus pacataeque centuriae et </span> 
<a popup-directive link="nullasuffragiorum" > nulla suffragiorum </a> 
<span> certamina set Pompiliani redierit securitas temporis </span> 

ich viele Dinge ausprobiert, aber ich kann nur so viel tun.

Bin ich in meinen Erklärungen klar genug?

Können Sie mir weiter helfen? Ich habe schon so viel Zeit verloren und bin total festgefahren.

Answer 1

var str = "Circa hos dies #Lollianus primae~lollianus# lanuginis adulescens, tribus pacataeque centuriae et #nulla suffragiorum~nullasuffragiorum# certamina set Pompiliani redierit securitas temporis"; 
var split = str.split(/[#]/g); 
var elements = []; 
for (var i in split){ 
    console.log(split[i]); 
    if (split[i].indexOf('~') !== -1){ 
    // this is a link 
    var link = split[i].split('~')[1]; 
    var content = split[i].split('~')[0]; 
    elements.push("<a popup-directive link=\""+link + '\">' + content + "</a>"); 
    } else { 
    elements.push("<span>" + split[i] + "</span>"); 
    } 
} 

nun diese Elemente in Ihre DOM Pop mit

document.createElement(htmlToElement(elements[0])); document.createElement(htmlToElement(elements[1]));

Answer 2

Einfaches Beispiel und Sie können es ändern :)

var regex = /#(.*?)#/g; 
 
var str = `Circa hos dies #Lollianus primae~lollianus# 
 
lanuginis adulescens, tribus pacataeque centuriae et 
 
#nulla suffragiorum~nullasuffragiorum# 
 
certamina set Pompiliani redierit securitas temporis`; 
 
var tempVal = "ANCHORLINK"; 
 
while ((matchs = regex.exec(str)) !== null) { 
 
    if (matchs.index === regex.lastIndex) { 
 
     regex.lastIndex++; 
 
    } 
 
    matchs.forEach((match, groupIndex) => { 
 
     if(groupIndex == 0) 
 
      \t str = str.replace(match, tempVal); 
 
     if(groupIndex > 0) { 
 
      var title = match.split("~"); 
 
      str = str.replace(tempVal, `<a href="${title[1]}" >${title[0]}</a>`); 
 
     } 
 
    }); 
 
} 
 
var result = document.getElementById("result"); 
 
result.innerHTML = str;

<div id="result"> 
 

 
</div>

Answer 3

dank euch beiden, es hat mir sehr geholfen.

Ich habe meine Methodik entsprechend geändert. Ich möchte die URL nicht mehr direkt zwischen # hinzufügen. Ich rufe einen Service an, der es mir ermöglicht, die Übereinstimmung zwischen dem Text des Links und einem Verweis zu finden, den ich erstellt habe.

ich daher eine Referenz erstellt:

referential.json

{ 
    "lollianus_primae" : { 
    "link" : "lollianus", 
    "content" : "torvum renidens fundato pectore mansit inmobilis nec se incusare nec quemquam alium passus et tandem nec confessus nec confutatus..." 
    }, 
    "nulla_suffragiorum" : { 
    "link" : "nullasuffragiorum", 
    "content" : "torvum renidens fundato pectore mansit inmobilis nec se incusare nec quemquam alium passus et tandem nec confessus nec confutatus..." 
    }, 
    "exploratius" : { 
    "link" : "exploratius", 
    "content" : "torvum renidens fundato pectore mansit inmobilis nec se incusare nec quemquam alium passus et tandem nec confessus nec confutatus..." 
    }, 
    } 

Dann habe ich die Richtlinie, die jedes Stück Text ermöglicht die Formatierung (ist, dass eine Spanne oder ein Link, wenn ja, ich? Fügen Sie dazu die Anweisung addActionToLink hinzu.

(function() { 
    'use strict'; 

    angular 
    .module('project') 
    .directive('formatText', formatText); 
    /** @ngInject */ 
    function formatText($compile) { 
    var directive = { 
     restrict: 'A', 
     replace:true, 
     scope : { 
     texte : '=' 
     }, 
     link: function (scope, elem, attrs) { 
      if (scope.texte.indexOf('_') !== -1){ 
      // this is a link 
      var link = scope.texte; 
      var content = scope.texte.replace('_', ' '); 
      elem.replaceWith($compile('<a add-action-to-link id="'+link+'">' + content + "</a>")(scope)); 
      } else { 
      elem.replaceWith($compile("<span>" + scope.texte + "</span>")(scope)); 
      } 
     } 
    }; 
    return directive; 
    } 
})(); 

Die Anweisung addActionToLink fügt dem Element eine mögliche Aktion hinzu. Falls eine Aktion durchgeführt wird, sendet er Informationen an den Dienst, der das Öffnen und Zuführen des Popup

(function() { 
    'use strict'; 

    angular 
    .module('project') 
    .directive(addActionToLink, addActionToLink); 

    /** @ngInject */ 
    function addActionToLink(dimensionsService, DefinitionService) { 
    var directive = { 
     restrict: 'A', 
     link: function (scope, elem, attrs) { 
     if (dimensionsService.estUnFormatDesktop()) { 
      elem.bind("mouseover", function() { 
      console.log(attrs); 
      DefinitionService.recupereReferential (attrs.id).then(function (res) { 
       DefinitionService.ouverturePopupEttransmissionInfosSurCetteDefinition(res.data, attrs, elem[0]); 
      }) ; 
      }); 
     } else { 
      elem.bind("click", function() { 
      console.log(attrs); 
      DefinitionService.recupereReferential (attrs.id).then(function (res) {  DefinitionService.ouverturePopupEttransmissionInfosSurCetteDefinition (res.data, attrs, elem[0]); 
      }); 
      }); 
     } 
     } 
    }; 
    return directive; 
    } 
})(); 

Dies ist, was die Vorlage wie folgt aussieht:

<p> 
    <ng-bind ng-repeat="text in page.text track by $index" format-text texte="text"></ng-bind> 
</p> 

Der Service Abrufen der Informationen und Das Öffnen des Popups befindet sich noch im Aufbau. Noch einmal, vielen Dank. Ich bin nicht mehr hängen geblieben.