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> 

服务检索信息和打开弹出窗口仍在建设中。 再一次，非常感谢你。我不再被困住了。