Javascript 将元素内的文本与时间字符串模糊匹配

这是我的html代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabella">
        <div class="rigaHead"></div>

                <div class="rigaEven">
                    <div class="col1">
                        <p class='room'>XXX</p>
                        <p class='where'>WHERE</p>
                    </div>
                    <div class="col2 half">
                        <p class='when'>09:00 - 13:00</p>
                    </div>
                    <div class="col3">
                         <p class="what">YYY</p>
                        <p class="who">PROFESSOR</p>
                    </div>
                </div>

                <div class="rigaOdd">
                  <div class="col1">
                        <p class='room'>XXX</p>
                        <p class='where'>WHERE</p>
                    </div>
                    <div class="col2 half">
                        <p class='when'>11:00 - 13:00</p>
                    </div>
                    <div class="col3">
                         <p class="what">ZZZ</p>
                        <p class="who">PROFESSOR</p>
                    </div>
                </div>

        </div>
    </div>

    <input type="text" id="search" onKeyUp="search()" />

---

但是它不起作用，代码

$（“.rigaEven:包含（“+text+”））.show（）仅在包含精确文本时有效，或者如果文本为9:00至11:00，而我的输入为9:00，则无法看到任何内容？
尝试使用以下功能：

function search() {
        var text = $('#search').val();
        $( "p").css( "text-decoration", "none" );
        $( ".rigaEven").hide();
        $( ".rigaOdd").hide();

        $( ".rigaEven:contains("+text+")" ).show();
        $( ".rigaOdd:contains("+text+")" ).show();

        $( "p.when:contains("+text+")" ).css( "text-decoration", "underline" );
    }

我只替换脚本中的一行：

来自
$（“p:contains（“+text+”））.css（“文本装饰”、“下划线”）
到


希望对你有帮助。谢谢
我有一点空闲时间，所以我快速研究了如何解决这个问题

我过去常常从输入字段和页面上指定元素中包含的文本中解析有效的时间签名。快速搜索发现了一个为我做这件事的

我没有使用jQuery来做DOM工作，而是使用了内置于web中的。这允许我获取页面上的元素以及其中包含的信息，在本例中是
innerText
和
值

通过我们感兴趣的元素文本和输入字段，获得并解析与时间签名匹配的字符串，然后使用，将结果进一步缩小到包含冒号字符的字符串
：
，我将结果传递到moment.js

我使用它是因为它简化了日期和时间的处理。几乎可以肯定的是，在没有任何库的情况下，这是一个非常臃肿的时刻，但为了节省时间，我使用了它

力矩基本上考虑了模糊匹配，我们只需要让力矩做重物，然后比较我们得到的“力矩”

下面是一个正在使用原始HTML的示例

这是我用来完成任务的javascript，不是最漂亮的，但我已经用光了我准备花在这上面的所有时间

function search() {
  var searchString = document.getElementById('search').value;
  var matchedTimes = matchTimeSignatures(searchString);
  if (matchedTimes) {
    searchCachedElements(matchedTimes.shift());
  }
}

function matchTimeSignatures(text) {
  var results = text.match(/([01]?[0-9]|2[0-3]):[0-5][0-9]/);
  if (results) {
    return parseMatches(results);
  }
}

function parseMatches(matchesArray) {
    var dateArray = [];
    matchesArray.forEach(function(item) {
    if (item.indexOf(':') !== -1) {
        dateArray.push(new moment(item, 'h:mm'));
    }
  });
  return dateArray;
}

function searchCachedElements(timeToMatch) {
  var elements = getElements();
  Object.keys(elements).forEach(function(el) {
    var matches = matchTimeSignatures(elements[el].innerText);
    if (compareResults(matches, timeToMatch)) {
      elements[el].style.display = 'initial';
    }
  });
}

function compareResults(matches, timeToMatch) {
  var positiveMatch = false;
  matches.forEach(function(match) {
    if (match.toString() === timeToMatch.toString()) {
      positiveMatch = true;
    }
  });

  return positiveMatch;
}

function getElements() {
  return {
    rigaEvenElement: document.querySelector('.rigaEven'),
    rigaOddElement: document.querySelector('.rigaOdd')
  };
}

document.getElementById('search').addEventListener('keyup', search);

你想在这里用模糊匹配吗？i、 e.09:00是否与9:00相匹配？此外，你有一系列的问题你永远不会接受答案，如果你接受一个对你有帮助的答案，你会在这里得到更好的结果。你可以回顾性地这样做。很有效……谢谢，但是如果我想CSS只应用于以09,10开头的文本，那么我该怎么做呢？示例text=9:00-10:00，另一个text1=10:00-12:00在搜索中，如果我写10:00，我希望只有text1可以看到。。。。你可以喜欢什么？好吧，你想在搜索框中输入10:00，只显示10:00-12:00，隐藏9:00-10:00，对吗？或者如果任何一个搜索10:15，只显示9,10,11点
$( "p.when:contains("+text+")" ).css( "text-decoration", "underline" );

function search() {
  var searchString = document.getElementById('search').value;
  var matchedTimes = matchTimeSignatures(searchString);
  if (matchedTimes) {
    searchCachedElements(matchedTimes.shift());
  }
}

function matchTimeSignatures(text) {
  var results = text.match(/([01]?[0-9]|2[0-3]):[0-5][0-9]/);
  if (results) {
    return parseMatches(results);
  }
}

function parseMatches(matchesArray) {
    var dateArray = [];
    matchesArray.forEach(function(item) {
    if (item.indexOf(':') !== -1) {
        dateArray.push(new moment(item, 'h:mm'));
    }
  });
  return dateArray;
}

function searchCachedElements(timeToMatch) {
  var elements = getElements();
  Object.keys(elements).forEach(function(el) {
    var matches = matchTimeSignatures(elements[el].innerText);
    if (compareResults(matches, timeToMatch)) {
      elements[el].style.display = 'initial';
    }
  });
}

function compareResults(matches, timeToMatch) {
  var positiveMatch = false;
  matches.forEach(function(match) {
    if (match.toString() === timeToMatch.toString()) {
      positiveMatch = true;
    }
  });

  return positiveMatch;
}

function getElements() {
  return {
    rigaEvenElement: document.querySelector('.rigaEven'),
    rigaOddElement: document.querySelector('.rigaOdd')
  };
}

document.getElementById('search').addEventListener('keyup', search);