遍历对象中的项目，找到匹配项并替换

问题描述

我有一个以以下格式返回的对象:

I have an object returned in the following format:

[
    {
        "category": "Coach",
        "phrase_original": "Training {{the team}} to develop their match skills by ensuring they are comfortable with {{defence techniques}}",
        "phrase_filter": "Training {{group}} to develop their {{attribute}} skills by ensuring they are comfortable with {{factor}}"
    },
    {
        "category": "Coach",
        "phrase_original": "Assisting the {{fitness coach}} in strength and conditioning work to improve {{team performance}}",
        "phrase_filter": "Assisting the {{person}} in strength and conditioning work to improve {{factor}}"
    }
]

我想逐个分析并替换:

phrase_filter中的
• {{group}}与<span style="group*button">group</span>
phrase_filter中的
• {{attribute}}和<span style="attribute-button">group</span>
phrase_filter中的
• {{factor}}和<span style="factor-button">group</span>
phrase_filter中的
• {{person}}和<span style="person-button">person</span>

• {{group}} in phrase_filter with <span style="group*button">group</span>
• {{attribute}} in phrase_filter with <span style="attribute-button">group</span>
• {{factor}} in phrase_filter with <span style="factor-button">group</span>
• {{person}} in phrase_filter with <span style="person-button">person</span>

实现此目标的最佳方法是什么?

What would be the best way of accomplishing this?

到目前为止，这是我的代码，我不确定是否要实现上面的代码.我目前正在从API端点获取数据，只是不确定如何处理它.

This is my code so far, I am not sure whether to implement the above. I am currently getting the data from the API endpoint, just not sure how to process it yet.

CategoryService.getCategoryDetail($scope.categoryId).then(function(dataResponse) {
  $scope.categoryDetail = dataResponse.data;
  angular.forEach($scope.categoryDetail, function(e) {
    // 1. find all the words in braces in phrase_filter
    // 2. replace them with html markup so they are rendered in the view differently
    // e.phrase_filter = ???
  });
});

推荐答案

您可以尝试以下方法:

var inputs = [
  {
    "category": "Coach",
    "phrase_original": "Training {{the team}} to develop their match skills by ensuring they are comfortable with {{defence techniques}}",
    "phrase_filter": "Training {{group}} to develop their {{attribute}} skills by ensuring they are comfortable with {{factor}}"
  },
  {
    "category": "Coach",
    "phrase_original": "Assisting the {{fitness coach}} in strength and conditioning work to improve {{team performance}}",
    "phrase_filter": "Assisting the {{person}} in strength and conditioning work to improve {{factor}}"
  }
]

var replacers = {
  '{{group}}' : '<span style="group-button">group</span>',
  '{{attribute}}' : '<span style="attribute-button">attribute</span>',
  '{{factor}}' : '<span style="factor-button">factor</span>',
  '{{person}}' : '<span style="person-button">person</span>'
}

// Loop through every objects
inputs.forEach(function(input){
  Object.keys(replacers).forEach(function(key){
    // Replace every occurence of this key
    input['phrase_filter'] = input['phrase_filter'].replace(new RegExp(key, 'g'), replacers[key]);
  })
})

console.log(inputs);

但是我不确定这是最好的解决方案，因为您使用的是angular ...您应该创建自定义指令或类似的东西，这样会更有效;)希望它会有所帮助

But I'm not sure it's the best solution regardind the fact that you work with angular... You should create custom directives or something like that it would be more efficient ;) Hope it helps

这篇关于遍历对象中的项目，找到匹配项并替换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！