使用从表单参数获取值的javascript的Highlite文本

i try to highlite a text using javascript, but using the value from form variable. I dunno why its not working...

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

Can some one point out a way out, please... below the script of page that i save as test01.php

有人可以指出一条出路,请...在我保存为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>

2 个解决方案

#1

You can achieve this using the Javascript text highlight jquery Plugin, add the plugin your website :

你可以使用Javascript文本突出显示jquery插件来实现这一点,添加你的网站插件:

 <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

#2

Have a look at mark.js. The following example shows you how to highlight a text entered inside a input dynamically inside a context with mark.js (see demo below).

看看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>

#1