Как выделить заранее заданные слова на веб странице?

342
24 ноября 2016, 10:05

Имеем:

  1. Любой текст на веб странице.
  2. Заранее заданный список ключевых слов (друг, небо, синий и т.д.)

Необходимо выделить цветом все слова на странице, которые совпали со словами по заданному ранее списку. Разумеется слова могут находится в любом html теге и иметь любой css стиль, поэтому нужна "привязка" выделения именно к слову.

На каком языке или с помощью чего можно реализовать подобное? Подскажите куда копать. Спасибо.

Answer 1

Самый простой вариант - 

let patterns = [ 
  {text: "друг", classes: ['orange']}, 
  {text: "небо", classes: ['tomato']}, 
  {text: "синий", classes: ['pink']} 
]; 
 
 
 
const marker = ( text, patterns ) => { 
  return patterns.reduce( ( result, current ) => { 
    let regexp = new RegExp(current.text, 'g'); 
    let style = current.classes.join(' '); 
     
    return result.replace( regexp, `<span class="${ style }">${ current.text }</span>` ); 
  }, text ); 
} 
 
let text = document.body.innerHTML; 
 
document.body.innerHTML = marker( text, patterns );
.orange { 
  background: orange; 
} 
.tomato { 
  background: tomato; 
} 
.pink { 
  background: pink; 
}
<span>друг небо синий друг небо синий друг небо синий</span> 
<span>друг небо синий друг небо синий друг небо синий</span> 
<span>друг небо синий друг небо синий друг небо синий</span>

Answer 2

Есть пара плагинов, которыми можно воспользоваться:

  • mark.js (его исходник).

Выглядит он как-то так:

$(function() { 
  var $context = $(".context"); 
  var $form = $("form"); 
  var $button = $form.find("button[name='perform']"); 
  var $input = $form.find("input[name='keyword']"); 
 
  $button.on("click.perform", function() { 
 
    // Determine search term 
    var searchTerm = $input.val(); 
 
    // Determine options 
    var options = {}; 
    var values = $form.serializeArray(); 
    /* Because serializeArray() ignores unset checkboxes */ 
    values = values.concat( 
      $form.find("input[type='checkbox']:not(:checked)").map( 
        function() { 
          return { 
            "name": this.name, 
            "value": "false" 
          } 
        }).get() 
    ); 
    $.each(values, function(i, opt){ 
      var key = opt.name; 
      var val = opt.value; 
      if(key === "keyword" || !val){ 
        return; 
      } 
      if(val === "false"){ 
        val = false; 
      } else if(val === "true"){ 
        val = true; 
      } 
      options[key] = val; 
    }); 
 
    // Remove old highlights and highlight 
    // new search term afterwards 
    $context.unmark(); 
    $context.mark(searchTerm, options); 
 
  }); 
  $button.trigger("click.perform"); 
});
/** 
 * Highlight any element inside the context 
 * because it can be freely defined 
 */ 
.context :not(p) { 
  background: #f1c40f; 
  padding: 0; 
} 
 
 
/** 
 * The following is not related to the plugin 
 */ 
body { 
  background: #fbfcfc; 
} 
 
.container { 
  max-width: 700px; 
} 
 
.form-group { 
  margin-bottom: 5px; 
} 
 
.form-group:last-child { 
  margin-bottom: 0; 
} 
 
.form-group label { 
  display: block; 
} 
 
.form-group label.noTransform { 
  text-transform: none; 
}
<script src="//code.jquery.com/jquery-2.2.3.js"></script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="//cdn.rawgit.com/julmot/mark.js/master/dist/jquery.mark.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/sandstone/bootstrap.min.css"> 
 
 
<div class="container"> 
  <h2><a href="https://markjs.io/" target="_blank">mark.js</a> demo</h2> 
  <div class="panel panel-default"> 
    <div class="panel-heading"> 
      <form class="row"> 
        <div class="col-xs-6"> 
          <div class="form-group"> 
            <label for="keyword">Search term:</label> 
            <input type="text" class="form-control input-sm" value="Lorem kasd erat" name="keyword" id="keyword"> 
          </div> 
        <button type="button" class="btn btn-default btn-sm" name="perform">Perform</button> 
        </div> 
        <div class="col-xs-6"> 
          <div class="form-group"> 
            <label for="accuracy">Accuracy:</label> 
            <select class="form-control input-sm" name="accuracy" id="accuracy"> 
              <option value="exactly">exactly</option> 
              <option value="partially" selected>partially</option> 
              <option value="complementary">complementary</option> 
             </select> 
          </div> 
           <div class="form-group"> 
            <label for="element" class="noTransform">Element</label> 
            <input type="text" class="form-control input-sm" value="mark" name="element" id="element"> 
          </div> 
          <div class="form-group"> 
            <label for="className" class="noTransform">Class name</label> 
            <input type="text" class="form-control input-sm" value="highlight" name="className" id="className"> 
          </div> 
          <div class="form-group"> 
            <label for="diacritics" class="noTransform"><input type="checkbox" value="true" name="diacritics" id="diacritics" checked> diacritics</label> 
          </div> 
          <div class="form-group"> 
            <label for="separateWordSearch" class="noTransform"><input type="checkbox" value="true" name="separateWordSearch" id="separateWordSearch" checked> separate word search</label> 
          </div> 
        </div> 
      </form> 
      <strong>For a full list of methods and options visit the <a href="https://markjs.io/configurator.html" target="_blank">configurator</a></strong> 
    </div> 
    <div class="panel-body context"> 
      <p>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 Lörem ipsum dolor sit amet. Lorem ipsüm 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> 
    </div> 
    <div class="panel-footer">This example is part of the article <a href="http://www.sitepoint.com/10-jquery-text-highlighter-plugins/" target="_blank">10 jQuery Text Highlighter Plugins</a> on <a href="http://sitepoint.com/" target="_blank">SitePoint</a> by <a href="https://github.com/julmot" 
        target="_blank">Julian Motz</a>.</div> 
  </div> 
</div>

Разделенные слова можно указать в поле SEARCH TERM:

  • jQuery highlightTextarea (его исходник).

Пример:

$(function() { 
  var $context = $(".context textarea"); 
  var $form = $("form"); 
  var $input = $form.find("input[name='keyword']"); 
 
  // Determine search term (plugin expects an array) 
  var searchTerm = $input.val().split(" "); 
 
  // Determine options 
  var options = { 
    "words": searchTerm 
  }; 
  $.each($form.serializeArray(), function(i, element) { 
    if (element.name === "keyword") { 
      return; 
    } 
    var val = element.value; 
    if (val === "true") { 
      // Convert to boolean from string 
      val = true; 
    } 
    options[element.name] = val; 
  }); 
 
  // Highlight 
  $context.highlightTextarea(options); 
 
});
/** 
 * The following is not related to the plugin 
 */ 
body { 
  background: #fbfcfc; 
} 
 
.container { 
  max-width: 700px; 
} 
 
.form-group { 
  margin-bottom: 5px; 
} 
 
.form-group:last-child { 
  margin-bottom: 0; 
} 
 
.form-group label { 
  display: block; 
} 
 
.form-group label.noTransform { 
  text-transform: none; 
}
<script src="//code.jquery.com/jquery-2.2.3.js"></script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="//cdn.rawgit.com/garysieling/jquery-highlighttextarea/master/jquery.highlighttextarea.js"></script> 
 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/sandstone/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/garysieling/jquery-highlighttextarea/master/jquery.highlighttextarea.css"> 
 
<div class="container"> 
  <h2><a href="http://garysieling.github.io/jquery-highlighttextarea/" target="_blank">jQuery highlightTextarea</a> demo</h2> 
  <div class="panel panel-default"> 
    <div class="panel-heading"> 
      <form class="row"> 
        <div class="col-xs-6"> 
          <div class="form-group"> 
            <label for="keyword">Search term:</label> 
            <input type="text" class="form-control input-sm" value="sit duo nonumy sea invidunt" name="keyword" id="keyword"> 
          </div> 
          There is no way to remove highlights with this plugin, so you can not update the search term or options dynamically.  
        </div> 
        <div class="col-xs-6"> 
          <div class="form-group"> 
            <label for="color">Color:</label> 
            <input type="text" class="form-control input-sm" value="#f1c40f" name="color" id="color"> 
          </div> 
          <div class="form-group"> 
            <label for="caseSensitive" class="noTransform"><input type="checkbox" value="true" name="caseSensitive" id="caseSensitive" checked="checked"> caseSensitive</label> 
          </div> 
        </div> 
      </form> 
    </div> 
    <div class="panel-body context"> 
      <textarea rows="5" cols="50" rows="5">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.</textarea> 
    </div> 
    <div class="panel-footer">This example is part of the article <a href="http://www.sitepoint.com/10-jquery-text-highlighter-plugins/" target="_blank">10 jQuery Text Highlighter Plugins</a> on <a href="http://sitepoint.com/" target="_blank">SitePoint</a> by <a href="https://github.com/julmot" target="_blank">Julian Motz</a>.</div> 
  </div> 
</div>

Также указываем слова и ищем.

  • Еще некоторые можно найти здесь
ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
Как получить картинку из бинарника?
jQuery

Как получить картинку из бинарника?

Здравствуйте прошу совета. У меня есть БД, я храню там картинки в бинарном виде.

443
Как можно сделать подсказчик для поля ввода, точности, как в Гугл? [закрыто]
jQuery

Как можно сделать подсказчик для поля ввода, точности, как в Гугл? [закрыто]

Нужно реализовать подсказчик для поля ввода, точности, как в Гугл. Например.

301
Как выполнять jQuery-код только на определенной странице?
jQuery

Как выполнять jQuery-код только на определенной странице?

Есть JS-файл, общий для всех страниц. Есть jQuery-код, который работает с элементами определенной страницы.

353
TreeGrid. Как сделать на несколько строчек?
jQuery

TreeGrid. Как сделать на несколько строчек?

Установил компонент https://github. com/maxazan/jquery-treegrid.

414