javascript - Vue : Make matching part of input bold, 包括特殊连字符

Question

我在 Vue 中制作了一个带有搜索/过滤系统的简单选择组件。根据用户输入，我正在展示一些比利时城市建议。

工作示例:https://codesandbox.io/s/wandering-lake-lecok?file=/src/components/Select.vue (有时在Codesandbox中会出现错误信息。在浏览器中刷新构建应该可以了)

我想将用户体验更进一步，将用户输入的匹配部分显示为粗体并加下划线。因此我有一个有效的 makeBold 函数。通过将建议字符串拆分为多个部分，我可以添加粗体和下划线标记并返回建议。

computed: {
    results() {
        return this.options.filter((option) =>
        option.display_name
            .replaceAll("-'", "")
            .toLowerCase()
            .includes(this.searchInput.replaceAll("-'", "").toLowerCase())
        );
    },
},
methods: {
    makeBold(str, query) {
        const n = str.toUpperCase();
        const q = query.toUpperCase();
        const x = n.indexOf(q);

        if (!q || x === -1) {
            return str;
        }

        const l = q.length;

        return (
            str.substr(0, x) + "<b><u>" + str.substr(x, l) + "</u></b>" + str.substr(x + l)
        );
    },
}

一个问题，比利时的很多城市都使用破折号和/或撇号。在建议功能中，我删除了这些字符，这样用户就不需要输入它们了。但在 makeBold 函数中，我想将这些字符设为粗体并加下划线。

例如:

当输入是“sint j”、“sintj”或“Sint-j”时，我希望建议看起来像“Sint-Jans-Molenbeek”和“Sint- Job in't Goor'

有人可以向我详细说明如何实现这一目标吗？

Answer 1

我建议使用掩码来保存城市名称结构，在找到城市名称中子字符串的开始和结束索引后，从掩码中恢复原始字符串，在开始和结束索引处插入适当的标签使用替换函数。这样您就不会担心任何其他非单词字符或其他意外的用户输入。

这里是 makeBold 函数:

makeBold(str, query) {
      // mask all word characters in city name
      const city_mask = str.replace(/\w/g, "#");
      // strip city and query string from any non-word character
      let query_stripped = query.toLowerCase().replace(/\W/g, "");
      let string_stripped = str.replace(/\W/g, "");
      // find the index of querystring in city name
      let index = string_stripped.toLowerCase().indexOf(query_stripped);

      if (index > -1 && query_stripped.length) {
        // find the end position of substring in stripped city name
        let end_index = index + query_stripped.length - 1;

        // replacer function for each masked character.
        // it will add to the start and end character of substring the corresponding tags,
        // replacing all masked characters with the original one.
        function replacer(i) {
          let repl = string_stripped[i];
          if (i === index) {
            repl = "<b><u>" + repl;
          }
          if (i === end_index) {
            repl = repl + "</u></b>";
          }
          return repl;
        }
        let i = -1;
        // restore masked string
        return city_mask.replace(/#/g, (_) => {
          i++;
          return replacer(i);
        });
      }

      return str;
    }

和here是工作沙箱。我对您的计算结果做了一些更改，以去除所有非单词字符。