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

Question

有没有任何方法来突出显示一个给定的词在一个成员模板内？

示例：

var givenWord = "hello"

ember模板如下：

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

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

Answer 1

使用车把帮手找到解决方案

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

注:我使用的是EMB0.2.5

Answer 2

没有内置的简单mechanism.You可以尝试在Ember中实现以下内容。

https://markjs.io/

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