从javascript数组中的每个单词中查找匹配的字母

时间:2016-06-29 19:21:01

标签: javascript html arrays

我在javascript中有一个数组:

function clean($str)
{       
    $str = utf8_decode($str);
    $str = str_replace(" ", " ", $str);
    $str = preg_replace('/\s+/', ' ',$str);
    $str = trim($str);
    return $str;
}

$html = "1 $nbsp;     2     3   4";
$output = clean($html);
echo $output;

我有textarea

 var books = ['spring','last night','sweet heart','the sky','tomorrow'] ;

所以我想要的是当我输入字母 <textarea id="text" name="textpreview" class="text"></textarea> 然后我会得到两个建议书只是第一个字而不是第二个字我的意思不是s只是sky和{{1 }。

我将获得两个跨度

spring

如果我在sweet heart之后再次输入 <textarea id="text" name="textpreview" class="text"></textarea> <span>spring</span> <span>sweet heart</span> 字母,例如textarea中的s,那么我只会p

sp

等等。

如果我输入spring,我什么也得不到。

如果我输入 <textarea id="text" name="textpreview" class="text"></textarea> <span>spring</span> ,我会收到nt

希望可以做到。感谢您的支持。

3 个答案:

答案 0 :(得分:3)

这有助于您:

&#13;
&#13;
<html>
<head>
    <title></title>
</head>
    <body>
        <textarea id="text" name="textpreview"  class="text"></textarea>
        <p id="x"></p>
        <script>
            var x = document.getElementById("x");
            var books = ['spring','last night','sweet heart','last night','the sky','tomorrow','tomorrow'];
            var txt = document.getElementById("text");
            txt.onkeyup = function(event) {
                var str = "";
                var arr = [];
                var index = (txt.value).indexOf("@");
                if(index !== -1 && (txt.value).substr(index + 1).length > 0) {
                        var value = (txt.value).substr(index + 1);
                        value = value.replace(/[\.\+\*\\\?]/g,'\\$&');
                        var patt = new RegExp("^" + value);
                        for(var i=0; i<books.length; i++) {
                            if(patt.test(books[i]) && arr.indexOf(books[i]) === -1) {
                                arr.push(books[i]);
                            }       
                        }
                    }
                if (arr.length < 1 )
                    x.innerHTML = "";
                else {
                    for(var i=0; i<arr.length; i++)
                        str+=arr[i]+"<br>";
                    x.innerHTML = str;
                }
            }
        </script>
    </body>
</html>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

此问题包含两部分:从DOM读取和写入输入/输出,以及过滤数组books

阅读和写作部分应该很简单,有很多关于如何实现这一目标的指南。

为了过滤books数组,JavaScript提供了许多有用的功能:

var books = ['spring','last night','sweet heart','the sky','tomorrow'];
var input = 'S';

var result = books.filter(function(book) {
    return book.toLowerCase().indexOf(input.toLowerCase()) === 0;
}).slice(0, 2);

console.log(result); // ['spring', 'sweet heart']

答案 2 :(得分:0)

@TimoSta是正确的,这是一个由两部分组成的问题。

我使用angular扩展了他的代码,以便在DOM中显示结果。

http://jsfiddle.net/kcmg9cae/

HTML:

<div ng-controller="MyCtrl">
  <textarea id="text" name="textpreview" class="text" ng-model="startsWith"></textarea>
  <span ng-repeat="book in sortedBooks()">{{ book }}</span>
</div>

使用Javascript:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.books = ['spring','last night','sweet heart','the sky','tomorrow'];
    $scope.sortedBooks = function () {
      var sortedBooks = [];

      for (var i = 0; i < $scope.books.length; i++){
        if ($scope.books[i].toLowerCase().indexOf($scope.startsWith.toLowerCase()) === 0)
          sortedBooks.push($scope.books[i]);
      }

        return sortedBooks;
    }
}