выделите слово в div, используя JavaScript - PullRequest
Новая
       7

выделите слово в div, используя JavaScript

0 голосов
/ 11 сентября 2009

Привет! Мне нужно реализовать функцию поиска и замены в моем проекте. в этой функциональности есть одна кнопка найти и заменить в верхней части contenteditable div. когда пользователь нажимает на эту кнопку, открывается всплывающее окно и запрашивает слово для поиска, когда задает слово и нажимает кнопку «найти», оно найдет слово только в этом элементе. и если совпадение найдено, оно выделит это слово. так кто-нибудь сказать мне, как я могу выделить слово в div. это срочно, поэтому, пожалуйста. спасибо. 

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

Я хочу выделить только тестовое слово, а не

Ответы [ 4 ]

0 голосов
/ 11 сентября 2009

Я только что украл это у 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 голосов
/ 11 сентября 2009

Чтобы выделить слово, нужно как-то выделить его. Один из вариантов - заключить слово в тег span. 

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

затем укажите CSS для класса подсветки.

0 голосов
/ 11 сентября 2009

На самом деле довольно просто использовать библиотеку 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 голосов
/ 11 сентября 2009

Вам нужно будет поискать в div, чтобы найти слово, а затем поместить это слово в диапазон и изменить цвет фона диапазона.

Редактировать: я только что заметил, что вы не используете CSS, поэтому вам нужно будет вставить тег шрифта, чтобы изменить цвет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...