Question

indexOf应该读取从HTML文件导入到JS的文本。似乎indexOf不能完全阅读文本，并且始终返回-1。

我尝试将search = newArray更改为search = newArray.indexOf（inputValue）.value

当我搜索“什么”（段落中的第一个字母）时，结果为5。我不知道为什么或如何。

<!DOCTYPE html>

<html>

<head>
    <title>Practice</title>
    <script src="practice.js" defer></script>
    <style src="practice.css"></style>
</head>

<body>
    <div id="container">

        <input type="text" id="searchInt" placeholder="Search..." />
        <button type="button" id="searchBtn" onclick="search();">Search</button>

        <div class="container2">
            <p id="lorem">
                What is Lorem Ipsum?
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>

    </div>
</body>

</html>

function search() {

    var textArray = document.getElementById("lorem").value =  document.getElementById("lorem").innerHTML;
    var newArray = [textArray];
    var inputValue = document.getElementById("searchInt").value;
    var search = newArray.indexOf(inputValue);

    alert(search);

    if (~search){
        alert("No search results!");
    } else {
        document.getElementById("lorem").innerHTML = search;
    }

}

它应该读出段落并给我结果。

Answer 1

您不需要新的数组。您可以直接在字符串上使用indexOf。您还可以在innerHTML上使用trim（）删除段落开头和结尾的多余空格，以获得更准确的位置

function search() { 
  var textString = document.getElementById("lorem").innerHTML.trim(); 
  var inputValue = document.getElementById("searchInt").value; 
  var search = textString.indexOf(inputValue); // search only contains number refereing to the index of the inputTerm. So you can not change background of search to highlit the input term
  
  if (search == -1){ 
    alert("No search results!"); 
  } else {
    var firstPart = textString.substr(0, search);
    var secondPart = textString.substr(search + inputValue.length, textString.length);
    var highlight = "<span class='highlight'>" + inputValue + "</span>";
    document.getElementById('lorem').innerHTML = firstPart + highlight + secondPart; 
  } 
}

.highlight{
  background-color: yellow;
}

<html>

<head>
    <title>Practice</title>
    <script src="practice.js" defer></script>
    <style src="practice.css"></style>
</head>

<body>
    <div id="container">

        <input type="text" id="searchInt" placeholder="Search..." />
        <button type="button" id="searchBtn" onclick="search();">Search</button>

        <div class="container2">
            <p id="lorem">
                What is Lorem Ipsum?
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>

    </div>
</body>

</html>

如果要突出显示每次出现的搜索词，可以将其放在下面的循环中

function search() { 
  var textString = document.getElementById("lorem").innerHTML.trim(); 
  var inputValue = document.getElementById("searchInt").value.trim(); 
  
  var newString = "";
  for(var i = 0; i < textString.length; i++){
    if(textString.substr(i, inputValue.length) == inputValue){
      var firstPart = textString.substr(0, i);
      var secondPart = textString.substr(i + inputValue.length, textString.length);
      var highlight = "<span class='highlight'>" + inputValue + "</span>";
      
      textString = firstPart + highlight + secondPart;
      i += highlight.length;
    }
  }
  
  document.getElementById('lorem').innerHTML = textString;
}

.highlight{
  background-color: yellow;
}

<html>

<head>
    <title>Practice</title>
    <script src="practice.js" defer></script>
    <style src="practice.css"></style>
</head>

<body>
    <div id="container">

        <input type="text" id="searchInt" placeholder="Search..." />
        <button type="button" id="searchBtn" onclick="search();">Search</button>

        <div class="container2">
            <p id="lorem">
                What is Lorem Ipsum?
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially Ipsum  unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>

    </div>
</body>

</html>

indexOf不进行比较并返回-1

1 个答案: