如何突出显示 hbs 中的给定单词？

Question

有没有办法在 ember 模板中突出显示给定的单词？

示例：

var givenWord = "hello"

ember模板如下：

<div>
<p>some text here, some another text with hello, again hello</p>
</div>

我想将特定的CSS应用到单词hello（这个单词是动态的）感谢任何帮助！

Answer 1

没有内置的简单方法 mechanism.You 可以尝试在 Ember 中实现以下内容。
https://markjs.io/

Answer 2

找到使用车把助手的解决方案

   Ember.Handlebars.helper('highlightMatchingText', function (text, phrase) {
    var highlightedText = text.replace(new RegExp(phrase, 'gi'), function (str) {
        return '<span class="color-red">' + str + '</span>';
    });
  return new Ember.Handlebars.SafeString(highlightedText);
});

那么我们可以在hbs里面这样调用

{{highlightMatchingText "text goes here" "hello"}}

注意：我正在使用 ember 0.2.5

Answer 3

你可以试试 this.Here span 会给它一个新的亮点

template.hbs

<div>
<p>some text here, some another text with <span>{{givenWord}}</span> again hello</p>
</div>

css 文件

span {
 color:red;
}

如何突出显示 hbs 中的给定单词？

How to highlight a given word inside hbs?

ember.js

handlebars.js

ember-cli