Question

我尝试使用javascript高亮显示文本，但使用表单变量中的值。我不知道为什么它不起作用......

有人可以指出一条出路，请...... 在我保存为test01.php的页面脚本下面

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
  span.highlight{background:yellow; padding:3px;}
</style>
</head>
<body>

<form action="" method="post" name="form1" target="_self" id="form1">
  <label for="search"></label>
  <input type="text" name="search" id="search" />
  <input type="submit" name="button" id="button" value="Submit" />
</form>
<table width="978" border="1" cellspacing="4" cellpadding="4">
  <tr>
    <td width="962">
    The house the red hare</td>
  </tr>
  <tr>
    <td><?php echo $_POST['search'] ?>&nbsp;</td>
  </tr>
</table>


<script type="text/javascript">
var s = document.querySelector('input[type="<?php echo $_POST['search'] ?>"]'),
    p = document.querySelector('p'),
    find = function(){
        var words = p.innerText.split(' '),
            i = words.length,
            word = '';

        while(--i) {
            word = words[i];
            if(word.toLowerCase() == s.value.toLowerCase()){
                words[i] = '<span class="highlight">' + word + "</span>";
            }
            else{

            }   
        }

        p.innerHTML = words.join(' ');
    }

s.addEventListener('keydown', find , false);
s.addEventListener('keyup', find , false);</script>

</body>
</html>

Answer 1

您可以使用Javascript text highlight jquery Plugin实现此目的，添加您网站的插件：

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  </head>
  <style>
    span.highlight{background:yellow; padding:3px;}
  </style>
  </head>
  <body>

  <form action="" method="post" name="form1" target="_self" id="form1">
    <label for="search"></label>
    <input type="text" name="search" id="search" value="<?php echo (isset($_POST['search'])) ? $_POST['search'] : ''; ?>" />
    <input type="submit" name="button" id="button" value="Submit" />
  </form>
  <table width="978" border="1" cellspacing="4" cellpadding="4">
    <tr>
      <td width="962">
      The house the red hare</td>
    </tr>
    <tr>
      <td><?php echo $_POST['search'] ?>&nbsp;</td>
    </tr>
  </table>


  <script type="text/javascript">

  /*

  highlight v4

  Highlights arbitrary terms.

  <http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>

  MIT license.

  Johann Burkard
  <http://johannburkard.de>
  <mailto:jb@eaio.com>

  */

  jQuery.fn.highlight = function(pat) {
   function innerHighlight(node, pat) {
    var skip = 0;
    if (node.nodeType == 3) {
     var pos = node.data.toUpperCase().indexOf(pat);
     if (pos >= 0) {
      var spannode = document.createElement('span');
      spannode.className = 'highlight';
      var middlebit = node.splitText(pos);
      var endbit = middlebit.splitText(pat.length);
      var middleclone = middlebit.cloneNode(true);
      spannode.appendChild(middleclone);
      middlebit.parentNode.replaceChild(spannode, middlebit);
      skip = 1;
     }
    }
    else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
     for (var i = 0; i < node.childNodes.length; ++i) {
      i += innerHighlight(node.childNodes[i], pat);
     }
    }
    return skip;
   }
   return this.length && pat && pat.length ? this.each(function() {
    innerHighlight(this, pat.toUpperCase());
   }) : this;
  };

  jQuery.fn.removeHighlight = function() {
   return this.find("span.highlight").each(function() {
    this.parentNode.firstChild.nodeName;
    with (this.parentNode) {
     replaceChild(this.firstChild, this);
     normalize();
    }
   }).end();
  };

      var s = <?php echo (isset($_POST['search'])) ? '"' .$_POST['search']. '"' : '""'; ?>;
      var p = document.querySelector('p');
      $(p).highlight(s);

      $('#search').keydown(function() {
        var s = $('#search').val();
        $(p).highlight(s);
      })

  </script>

  </body>
  </html>

JsFiddle

Answer 2

查看mark.js 。以下示例显示如何使用mark.js在上下文中动态突出显示在输入内输入的文本（请参阅下面的演示）。

var markInstance = new Mark(document.querySelector(".context"));
function highlight(){
    var searchTerm = document.querySelector("input").value;
    markInstance.unmark().mark(searchTerm);
}

mark{
    background: yellow;
}

<script src="https://cdn.rawgit.com/julmot/mark.js/6.1.0/dist/mark.min.js"></script>
<input type="text" placeholder="Lorem ipsum..." oninput="highlight()">
<p class="context">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

使用从表单参数

2 个答案: