使用javascript從表單參數獲取值的Highlite文本

Question

我嘗試使用javascript高亮顯示文本，但使用form變量中的值。 我不知道為什么它不起作用...

能有人指出一條出路嗎，請...在我另存為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文本突出顯示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

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>

使用javascript從表單參數獲取值的Highlite文本

問題描述

2 個解決方案

解決方案1
0 2016-05-22 13:41:11

解決方案2
0 2016-05-23 19:17:44

使用javascript從表單參數獲取值的Highlite文本

問題描述

2 個解決方案

解決方案1 0 2016-05-22 13:41:11

解決方案2 0 2016-05-23 19:17:44

解決方案1
0 2016-05-22 13:41:11

解決方案2
0 2016-05-23 19:17:44