AngularJS：將字符串轉換爲帶有指令的HTML模板

Question

我正在開發一個Web應用程序項目。一年前，當我開始寫作的時候，我總是編碼（我什麼都不懂）。 現在，我即將發佈它，但它忽略了最大的功能。

該項目是用Angular 1.5開發的。這是一個「可編輯的wysiwyg維基應用程序」來呈現一個幻想世界：我寫一篇文章，然後發佈。 這篇文章包含的句子組成：
=>標準文本
=>可點擊的鏈接。
=>這個可點擊的鏈接打開一個小小的定義
=>此彈出包含一個「瞭解更多」鏈接
=>這個「瞭解更多鏈接」重定向到另一個（url）文章。

這就是我的問題：我不知道該怎麼去做。這裏是文本格式化方式：

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

我想捕捉的＃字符的字符串，然後在2拆分此字符串：文字是波形符之前，該鏈接來之後。 我所要的輸出是這樣的：

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

我試過很多東西，但我只能做這麼多。

我的解釋清楚了嗎？

你能幫我進一步嗎？我已經失去了很多時間，我完全陷入了僵局。

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

現在使用

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

Answer 2

簡單的例子彈出這些元素到你的DOM，你可以改變它:)

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

感謝你們兩位，這對我幫助很大。

我已經相應地更改了我的方法。我不想直接在＃之間添加網址。我打電話給一個服務，讓我找到鏈接文本和我創建的參考之間的對應關係。

我因此創建了一個參考：

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..." 
    }, 
    } 

然後創建其使得能夠格式化每個文本塊的指令（是一個跨度或一個鏈接，如果是這樣，我？添加addActionToLink指令給它）。

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

addActionToLink指令向元素添加可能的操作。 在情況下采取行動，它發送信息到負責打開的服務和餵養彈出

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

這是模板的樣子：

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

服務檢索信息和打開彈出窗口仍在建設中。 再一次，非常感謝你。我不再被困住了。