通过数组javascript搜索和过滤答案

【问题标题】：Search and filter through array javascript通过数组javascript搜索和过滤
【发布时间】：2018-12-25 19:52:51
【问题描述】：

请原谅标题我不知道如何描述我在做什么

我有一个文本区域，人们可以在其中编写 cmets，但他们也可以使用我制作的 @mention 系统提及人们......现在我唯一的问题是一旦用户在 @ 之后开始输入它不会缩小用户范围所以说我有一个像这样的对象数组..

users = [
  {
    name: steve,
    id: 47 
  },
  {
    name: james,
    id: 41
  },
  {
    name: guy,
    id: 44 
  },
  {
    name: troy,
    id: 32 
  }
]

如何根据@ 符号后写入的字符串过滤掉数组中的用户，所以如果我在文本区域中写入@tr，我的用户数组现在应该如下所示

users = [
  {
    name: troy,
    id: 32
  }
]

任何帮助将不胜感激！

【问题讨论】：

标签： javascript

【解决方案1】：

使用filter 来检查用户的name 是否遍历includes 相关子字符串：

const users = [
  {
    name: 'steve',
    id: 47 
  },
  {
    name: 'james',
    id: 41
  },
  {
    name: 'guy',
    id: 44 
  },
  {
    name: 'troy',
    id: 32 
  }
];

const substr = 'tr';
console.log(
  users.filter(({ name }) => name.includes(substr))
);

还要确保您的name 值是字符串。

【讨论】：

抱歉，又是一个小问题，我如何只检查@之后的字符串？？
@SmokeyDawson 如果输入字符串实际上包含@，则匹配@ 之后的所有内容：value.match(/@(.+$)/)[1] 或者如果可能有多个@s，@987654331 @

【解决方案2】：

试试这个。

let str = "@tr";

var users = [
  {
    name: "steve",
    id: 47 
  },
  {
    name: "james",
    id: 41
  },
  {
    name: "guy",
    id: 44 
  },
  {
    name: "troy",
    id: 32 
  }
];

const filteredUser = users.filter(user => user.name.includes(str.replace(/@/, "")));
console.log(filteredUser);

【讨论】：

抱歉，又是一个小问题，我如何只检查@之后的字符串？？
是的，这就是我将“@”替换为“”的原因。

【解决方案3】：

你可能想要filter

const users = [
  {
    name: 'steve',
    id: 47 
  },
  {
    name: 'james',
    id: 41
  },
  {
    name: 'guy',
    id: 44 
  },
  {
    name: 'troy',
    id: 32 
  }, {
    name: 'stephon',
    id: 141
  }
];

const partialUserName = 'st';
const output = users.filter(user => user.name.startsWith(partialUserName)); 
// you can change to contains if that's what you want
console.log(output)

【讨论】：

【解决方案4】：

你可以试试搜索方法

  const substr = 'tr';
   array.filter(( name ) => {
     return (
      name.toLowerCase()
      .search(substr.toLowerCase()) !== -1
       )

希望有帮助

【讨论】：

【解决方案5】：

我会推荐一种类似于其他答案的方法，但我会使用startsWith 而不是includes，并确保在比较它们时将两个字符串都小写。这将为您提供更准确的结果。

const names = [{ name: 'Bob'}, { name: 'Sally' }, { name: 'Frank' }, { name: 'Lester' }, { name: 'Bo' }, { name: 'Salazar' }, { name: 'Frida' }];
const textArea = document.querySelector('[data-id="textarea"]');
const nameWrap = document.querySelector('[data-id="names"]');

function inputListener() {
  let shouldListen = false;
  let index;
  return (e) => {
    const { value } = e.currentTarget;
    const currentValue = value[value.length - 1];
    if(shouldListen) {
      if(currentValue === ' ' || value.length - 1 < index) {
        shouldListen = false;
        return;
      }
      const str = (value.substr(index).match(/@(.+$)/)[1]).toLowerCase();
      const html = names
        .filter(({ name }) => name.toLowerCase().startsWith(str))
        .map(({ name }) => `<p>${name}</p>`)
        .join('');
        console.log(html)
     nameWrap.innerHTML = html;
    }
    if(currentValue === '@' && !shouldListen) {
      shouldListen = true;
      index = value.length - 1;
    }
  }

}
textArea.addEventListener('input', inputListener())

<textarea data-id="textarea"></textarea>
<div data-id="names"></div>

【讨论】：