Question

您必须在我的项目中实现查找和替换功能。在此功能中，在contenteditable div的顶部有一个查找和替换按钮。当用户点击此按钮时，弹出窗口将打开并在指定单词时询问搜索词，然后按查找它将仅在该div中找到单词。如果匹配，则会突出显示该单词。所以任何人都告诉我如何突出div中的单词。请它紧急。谢谢。

<div id="test" contenteditable="true">
this is test <font class='classname'> some text test</font>
</div>

我想高光只有测试词而不是

Answer 1

您需要搜索div以查找单词，然后将该单词放入跨度，并更改跨度的背景颜色。

编辑：我刚刚注意到你没有使用CSS，所以你需要插入一个字体标签来改变颜色。

Answer 2

使用prototype库实际上非常简单：

<html> 
    <head> 
        <style type="text/css">
            #content span {
                background-color: yellow;
            }
        </style>
        <script type="text/javascript" src="prototype.js"></script>
        <script type="text/javascript">
            Event.observe(window,'load',function(){
                var htm = $('content').innerHTML;
                $('content').innerHTML = htm.sub('my','<span>my</span>');
            });
        </script>
    </head>
    <body>

        <div id="content">
            This is the div containing my content.
        </div>

    </body>
</html>

这应该让你开始，这样你就可以实现其余的。

Answer 3

我只是从文档工具Sphix中偷走了这个：

/**
 * highlight a given string on a jquery object by wrapping it in
 * span elements with the given class name.
 */
jQuery.fn.highlightText = function(text, className) {
  function highlight(node) {
    if (node.nodeType == 3) {
      var val = node.nodeValue;
      var pos = val.toLowerCase().indexOf(text);
      if (pos >= 0 && !jQuery.className.has(node.parentNode, className)) {
        var span = document.createElement("span");
        span.className = className;
        span.appendChild(document.createTextNode(val.substr(pos, text.length)));
        node.parentNode.insertBefore(span, node.parentNode.insertBefore(
          document.createTextNode(val.substr(pos + text.length)),
          node.nextSibling));
        node.nodeValue = val.substr(0, pos);
      }
    }
    else if (!jQuery(node).is("button, select, textarea")) {
      jQuery.each(node.childNodes, function() {
        highlight(this)
      });
    }
  }
  return this.each(function() {
    highlight(this);
  });
}

/**
 * helper function to hide the search marks again
 */
hideSearchWords : function() {
  $('.sidebar .this-page-menu li.highlight-link').fadeOut(300);
  $('span.highlight').removeClass('highlight');
},

/**
 * highlight the search words provided in the url in the text
 */
highlightSearchWords : function() {
  var params = $.getQueryParameters();
  var terms = (params.highlight) ? params.highlight[0].split(/\s+/) : [];
  if (terms.length) {
    var body = $('div.body');
    window.setTimeout(function() {
      $.each(terms, function() {
        body.highlightText(this.toLowerCase(), 'highlight');
      });
    }, 10);
    $('<li class="highlight-link"><a href="javascript:Documentation.' +
      'hideSearchWords()">' + _('Hide Search Matches') + '</a></li>')
        .appendTo($('.sidebar .this-page-menu'));
  }
},

因此，将此添加到您网站中的js文件中，任何带有突出显示GET参数的页面都将搜索并突出显示该页面中的单词。您可以在以下位置找到工作代码的演示：

http://sphinx.pocoo.org/intro.html?highlight=python

注意：此代码需要jQuery，当然......

Answer 4

要突出显示单词，您必须以某种方式选择它。一种选择是用span标记包围单词。

this is <span class="highlight">test</span> some text test

然后为高亮类指定CSS。

使用javascript突出显示div中的单词

4 个答案: