我需要使用 vuejs 编写文本高亮过滤器的帮助。这个想法是遍历给定的单词数组，如果有匹配项，则将带有类的 span 应用于该单词。我遇到的问题是，我似乎无法使用 vuejs 以 html 格式返回数据。任何想法都将受到高度赞赏。我真的被这个困住了。
Vue.filter('highlight', function(words, query){
//loop through **words** and if there is a match in **query**
//apply a <span> with some style
//At the end return formatted string to html page
})
【问题讨论】：
标签： javascript text formatting vue.js
HTML 插值 {{{ foo }}} 已被移除以支持 vuejs2.X 中的 v-html 指令，因此从版本 2.x 开始，Vue.js 允许原始 JavaScript 模板（React 风格）除了 HTML 模板。
@jeff 的答案是正确的，但对于 vuejs 1.x 版本，但如果 {{{}}} 对你们不起作用，或者如果您想评估 HTML 中的标签，并且来自受信任的来源，例如，如果你想添加一个<strong></strong>标签，那么你需要使用v-html，v-html要求Vue将字符串评估为HTML：
<span v-html="$options.filters.highlight(item, val)">{{ item }}</span>
高亮过滤器：
Vue.filter('highlight', function(word, query){
var check = new RegExp(query, "ig");
return word.toString().replace(check, function(matchedText,a,b){
return ('<strong>' + matchedText + '</strong>');
});
});
或者你可以使用@Thomas Ferro 的过滤器
【讨论】：
/** * * @param { String } words * @param { String } query */ export const highlight = (words, query) => { var check = new RegExp(query.split(",").join("|"), "ig"); return words.toString().replace( check, (matchedText, a, b) => { return `<strong>${matchedText}</strong>` } ) }
正如 Jeff 刚才所说，基本的小胡子将数据解释为纯文本。
您可以通过将查询替换为String.replace() 方法来添加您的跨度。
这是一个基本示例：https://jsfiddle.net/0jew7LLz/
Vue.filter('highlight', function(words, query) {
return words.replace(query, '<span class="highlight">' + query + '</span>')
});
【讨论】：
这个想法是使用拆分并保留正则表达式匹配的单词。
这是一个用户安全的组件，它转义 html 并突出显示搜索多个单词的正则表达式：
Vue.component('child', {
props: ['msg', 'search', 'effect'],
template: '<span><span v-for="(s, i) in parsedMsg" v-bind:class="getClass(i%2)">{{s}}</span></span>',
methods: {
getClass: function(i) {
var myClass = {};
myClass[this.effect] = !!i;
return myClass;
},
},
computed: {
parsedSearch : function () {
return '(' + this.search.trim().replace(/ +/g, '|') + ')';
},
parsedMsg: function() {
return this.msg.split(
new RegExp(this.parsedSearch , 'gi'));
}
}
})
new Vue({
el: '#app',
}
// ...
})
使用示例：
<div id="app">
<child msg="My life so good and awesome, is'nt it great?" search=" life is good " effect='highlight'> </child>
</div>
jsfiddle：
【讨论】：
您需要使用带有 3 个大括号的 {{{ foo | highlight }}}，而不是带有 2 个 {{}}。两个大括号转义 HTML。
【讨论】：