Question

我正在开发一个Web应用程序项目。当我开始它的时候，1年前，我在编码方面是一个彻头彻尾的noobie（我什么都不知道j.s.）。现在，我即将发布它，但它错过了最大的特色。

该项目是使用Angular 1.5开发的。这是一个“可编辑的所见即所得wiki应用程序”来呈现一个幻想世界：我写了一篇文章然后发布它。本文包含的句子包括：
=＆GT;标准文本
=＆GT;可点击的链接。
=＆GT;此可点击链接打开一个带有一个小定义的弹出窗口
=＆GT;这个弹出窗口包含一个«了解更多»链接
=＆GT;这个«知道更多链接»重定向到另一个（网址）文章。

这就是我的问题：我不知道如何去做。以下是文本格式的方式：

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

现在使用

将这些元素弹出到您的DOM中

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

Answer 2

简单示例，您可以更改它：）

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

感谢你们两位，这对我帮助很大。

我相应地改变了我的方法。我不想直接在＃anymore之间添加网址。我打电话给一个服务，让我找到链接文本和我创建的参考之间的对应关系。

因此我创建了一个参考：

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

然后我创建了一个指令，它可以格式化每一段文本（是一个span？还是一个链接？如果有的话，我会添加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>

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

AngularJS：将字符串转换为带有指令

3 个答案: