Выделение текста под тегом Div

Question

Допустим, у меня есть такой div:

<div id="test" class="sourcecode">
"Some String"
</div>

Можно ли использовать css и js, чтобы выделить часть этой строки на основе поискового запроса?

Например, еслиЯ искал слово «Страй», чтобы оно выделило эту часть?

Answer 1

Попробуйте плагин jquery.highlight .

Создайте селектор jQuery, содержащий div, в котором вы хотите выделить текст:

var $div = $('#test');

Затем запуститеПлагин выделения со словом (ами), которое вы хотите выделить

$div.highlight('Stri');

Также вы должны стилизовать класс "highlight" в вашем css, так как это тот класс, который подсветчик даст выделенному тексту:

.highlight
{
    background-color: yellow;
    outline: 1px solid black;
}

Answer 2

Вам придется разделить текст, выделив выделенную часть на <span>.Вот так.

<div id="test" class="sourcecode">
"Some <span style="background-color:yellow">Stri</span>ng"
</div>

Чтобы сделать символы, представляющие теги HTML, если у вас есть:

<div id="test" class="sourcecode">
    &lt;html&gt;String&lt;/html&gt;
</div>

... вы можете выделить так же, как и раньше:

<div id="test" class="sourcecode">
    <span style="background-color:yellow">&lt;html&gt;Stri</span>ng&lt;/html&gt;
</div>

Answer 3

<div id="test" class="sourcecode">
"Some String"
</div>

в javascript после получения результата поиска.

<script>
  var test = $('test').innerHtml;
  var query= 'Str';
  var new_str = test.replace(query, '<font style="background:yellow;color:red;" >'+query+'</font>');
  $('test').innerHtml = new_str;
</script>