使用JavaScript高亮显示div中的单词

twh00eeo 于 2023-05-16 发布在 Java

关注(0)|答案(4)|浏览(160)

我必须在项目中实现查找和替换功能。在此功能中，contenteditablediv顶部有一个查找和替换按钮。当用户点击这个按钮，一个弹出窗口将打开，并要求搜索词时，指定的词，并按下查找它会发现词在该div只。如果找到任何匹配项，它将突出显示该单词。如何在div中突出显示单词。

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

我只想突出显示单词test，其他什么都不想。

JavaScript

来源：https://stackoverflow.com/questions/1411026/highlight-word-in-div-using-javascript

4条答案

按热度按时间

aurhwmvo1#

你需要搜索div找到单词，然后把这个单词放到一个span中，并改变span的背景颜色。
编辑：我刚刚注意到你没有使用CSS，所以你将需要插入一个字体标签来改变颜色。

赞(0）回复(0）举报 2023-05-16

6kkfgxo02#

我刚刚从文档工具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，当然...

赞(0）回复(0）举报 2023-05-16

pobjuy323#

使用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>

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

赞(0）回复(0）举报 2023-05-16

pdsfdshx4#

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

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

然后为突出显示类指定CSS。

赞(0）回复(0）举报 2023-05-16

我来回答

使用JavaScript高亮显示div中的单词

4条答案

相关问题

热门标签

最新问答