Vue+Quasar框架下字符串文本高亮的粘连问题及解决

需求目标 #

在Vue和Quasar框架中，实现对目标字符串内指定文本的高亮显示。目标字符串：

"Lorem ipsum dolor sit amet CONSECTETUR adipiscing elit"

初始模板代码问题 #

• 最初的代码无法实现高亮效果：

<span:class="[highlight]">
{{ highlightSearchExpression(string) }}
 />

• 使用v-html指令后，高亮文本与前后单词出现粘连问题：

<span
  v-html="highlightSearchExpression(string)"
  :class="[highlight]"
/>

高亮方法代码 #

highlightSearchExpression: function (str) {
  let searchWords = 'CONSECTETUR';

  if (str && searchWords) {
    // 处理多关键词搜索场景
    let searchValues = searchWords.toLowerCase().trim().split(" ");

    let pattern = new RegExp(`(.)(${searchValues.join("|")})`, "gi");
    let replacement = '$1<span class="highlight">$2</span>';

    return str.replace(pattern, replacement);

  } else {
    return str;
  }
}

注：原代码中闭合标签写法有误（</span class="highlight">），已修正为标准的</span>

CSS样式代码 #

.highlight {
  color: #000000;
}

问题现象 #

• 预期效果：Lorem ipsum dolor sit amet CONSECTETUR adipiscing elit（高亮文本与前后单词保留正常空格分隔）
• 实际效果：Lorem ipsum dolor sit ametCONSECTETURadipiscing elit（高亮文本与前后单词粘连）

解决方案 #

经排查，问题根源在于span标签使用了Quasar的row类，该类改变了span的默认排版特性。将row类移至外层div后，问题解决。修改后的模板代码如下：

<div class="justify-center row">
    <span
      class="text-grey-10"
       v-html="highlightSearchExpression(string)"
       :class="[highlight]"
     />
</div>

内容的提问来源于stack exchange，提问作者jose