AngularJS：文字列を指示文付きのhtmlテンプレートに変換します

Question

私はWebアプリケーションプロジェクトで作業しています。私が1年前にそれを始めたとき、私はコーディングのトータルなノービーでした（私は何も知らなかった）。 今、私はそれを出版する寸前ですが、最大の特徴を欠いています。

プロジェクトは、角度1.5で開発されました。それはファンタジーの世界を提示するための«編集可能なwysiwyg wikiアプリケーション»です：私は記事を書くと私はそれを投稿します。 この記事には次の文章が含まれています：
=>標準テキスト
=>クリック可能なリンク。
=>このクリック可能なリンクは少しの定義を含むポップアップを開きます
=>このポップアップには«もっと知って»リンクが含まれています
=>この««もっと知っているリンク»を別の（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

あなたのおかげで、それは私を助けてくれました。

私はそれに応じて方法を変更しました。私は＃の間にURLを直接追加したくない。私はリンクのテキストと私が作成した参照の間の対応を見つけることを可能にするサービスを呼び出します。

そこで私は、参照を作成しました：

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> 

情報を取得するサービスとポップアップを開くことはまだビルの下にあります。 もう一度、ありがとう。私はもはや詰まらない。