更有效的格式化数组的方法,而不使用jQuery添加' - '

时间:2017-06-14 01:03:44

标签: javascript jquery html

我正在创建一个程序,根据我创建的数组中的关键字过滤单词列表。目前我有阵列设置,如果有一个关键字,如“java脚本”,我还需要添加“java脚本”,以确保当用户输入单词列表时,即使它采用不同的格式,它也会过滤掉。有没有更有效的方法来执行此操作,因此我不必通过在空格之间添加短划线来复制数组中的每个关键字?

任何帮助将不胜感激。感谢。

// Function for filter button
$('.pbf-link-container[contenteditable]').html('<div><br/></div>');
$('#pbf-filter').click(function() {
  var $pbfOutput = $('.pbf-link-container[contenteditable]').html();
  // Array of words for filter
  var pbfFilterWords = ['baby bullet', 'baby-bullet', 'java script', 'java-script', 'key word', 'key-word', 'keyword'];
  // Output to new DIV and remove specified keywords from pbfFilterWords
  $('.pbf-link-output').html($pbfOutput);
  // To make pbfFilterWords not case sensitive
  $.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function(elem) {
      return $(elem).html().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
  });
  // Function to output the filtered words
  $.each(pbfFilterWords, function(i, val) {
    $('.pbf-link-output > div:contains("' + val + '")').remove();
  });
});
.pbf-header {
  text-align: center;
}

.pbf-link-container {
  width: 100%;
  min-height: 300px;
  background-color: #e8e8e8;
  font-size: 12px;
  font-family: 'Lato', sans-serif;
  white-space: nowrap;
  overflow: visible;
}

.pbf-button-control {
  text-align: center;
  padding: 2%;
}

.pbf-filter-header {
  text-align: center;
}

.pbf-link-output {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  padding-bottom: 10%;
  white-space: nowrap;
  overflow: visible;
  background-color: #e8e8e8;
  margin: 3%;
}

.pbf-footer {
  display: block;
  padding: 2%;
  background-color: #111;
  color: #fff;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<body>
  <div id="pbf-container">
    <div class="pbf-header">
      <h1> VERO Filter Program </h1>
      <h3> Input Links Here </h3>
    </div>
    <div class="pbf-link-container" contenteditable="true">
    </div>
    <div class="pbf-button-control">
      <button id="pbf-filter"> Filter </button>
    </div>
    <div class="pbf-filter-header">
      <h3> Filtered Links </h3>
    </div>
    <div class="pbf-link-output">
    </div>
  </div>

  <script src="\VERO Filter\pbf.js"></script>

</body>

1 个答案:

答案 0 :(得分:1)

想到......这是一个好主意......

我使用hello hell-o jello来尝试您的代码段 对于你选择定位的单词会有什么认可?

-

我认为,这个问题已经被一些具有大服务器功能的大型网站所解决 搜索引擎......有很多团队。
好主意!

但是在 JS 执行的前端......用户方面,他的中档移动消费者«可以放弃»设备....

简单的想法是必须循环通过一个10公里长的“热门词”array来查找匹配项或“接近”匹配...
不应该想到。

---是的。这绝对是一种意见。 ---
但是这样可以节省数学时间。

我建议您使用自己已知的流行语来考虑“自动完成”功能或插件(maybe this one? Theres is a couple)。

也许建议新的?按钮没有相关的匹配。

这是我所知道的最短路径。