Как обернуть ключевые слова в HTML-код с помощью всплывающей подсказки

Question

Что может быть лучшим способом пометить некоторые ключевые слова в HTML-код.

Например, у меня есть этот HTML-код:

$text = '
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy<br>
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
    <p><img src="test.jpg" alt="Lorem Ipsum">
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br>
    one, nò sea takimata 1 sanctus est <a href="#" title="Lorem Ipsum">Lorem ipsum</a> dolor sit amet. Lörem ipsum dolor sit amet,<br>
    consetetur sadipscing elitr, sed diam lor­em ipsum nonumy eirmod tempor invidunt ut labore et<br>
    dolore magna aliquyam erat, sed diam voluptua.
    </p>
';

И я хотел бы выделить слово «Lorem Ipsum» следующим образом: <span class="tooltip">Lorem Ipsum</span>

Поскольку ключевые слова происходят из базы данных, может случиться так, что определенные слова встречаются только один раз и, следовательно, дважды:

$keywords = ['Lorem Ipsum', 'Lorem']

В этом случае должен быть только один маркер. Потому что я не хочу такой код:

<span class="tooltip"><span class="tooltip">Lorem</span> Ipsum</span>

Также все атрибуты тегов, такие как title и alt, следует игнорировать. То же самое должно относиться к ссылкам, потому что я не хочу двойную функцию, такую ​​как наведение и нажатие. Таким образом, отмеченный результат должен выглядеть следующим образом:

$text = '
    <h1><span class="tooltip">Lorem Ipsum</span></h1>
    <p><span class="tooltip">Lorem ipsum</span> dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy<br>
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
    <p><img src="test.jpg" alt="Lorem Ipsum">
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br>
    one, nò sea takimata 1 sanctus est <a href="#" title="Lorem Ipsum">Lorem ipsum</a> dolor sit amet. Lörem ipsum dolor sit amet,<br>
    consetetur sadipscing elitr, sed diam <span class="tooltip">lor­em ipsum</span> nonumy eirmod tempor invidunt ut labore et<br>
    dolore magna aliquyam erat, sed diam voluptua.
    </p>
';

Как видите, ключевое слово Lorem Ipsum также должно соответствовать lorem ipsum в нижнем регистре.

Я хотел бы знать, каков наиболее перспективный способ решения этой проблемы. PHP и Javascript будет возможно. Может ли кто-нибудь помочь мне с подходом? Кому-нибудь приходилось решать эту проблему?

Answer 1

Вы можете решить эту простую задачу с помощью регулярного выражения

/ (>. ) (Lorem Ipsum) (. ? <) / Ги </em>

Проверьте это

Answer 2

Это похоже на фильтр плохих слов с использованием php Использование Google для его поиска.

эта функция определит, содержит ли ваш текст какое-либо из слов, и заменит его на * этоочень похоже на то, что вы ищете, и тот же подход, который вы должны будете сделать.

1. Проверьте, содержит ли ваш текст слово из массива

   A.Да, содержит, вам нужно убрать это слово из вашего текста из всех HTML-тегов, вы можете использовать что-то вроде этого strip_tags("Hello <b>world!</b>");, а затем заменить на то, что вы хотите, или просто обернуть его с <Mark>

   B.Нет Не содержит, тогда вы продолжите.

2. Ваш строковый регистр Upper или Lower вы можете исправить, используя

   lcfirst('January'); // january ucfirst('January'); // January ucwords('a title without caps'); // A Title Without Caps

Пример Функция изменит ваши слова в массиве на *

function filterwords($text){
 $filterWords = array('Lorem Ipsum','Lorem','Else');
 $filterCount = sizeof($filterWords);
 for($i=0; $i<$filterCount; $i++){
  $text = preg_replace('/\b'.$filterWords[$i].'\b/ie',"str_repeat('*',strlen('$0'))",$text);
 }
 return $text;
}

Использование

echo filterwords("
    <h1><mark>Lorem Ipsum</mark></h1>
    <p><mark>Lorem ipsum</mark> dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy<br>
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
    <p><img src="test.jpg" alt="Lorem Ipsum">
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br>
    one, nò sea takimata 1 sanctus est <a href="#" title="Lorem Ipsum">Lorem ipsum</a> dolor sit amet. Lörem ipsum dolor sit amet,<br>
    consetetur sadipscing elitr, sed diam <mark>lor­em ipsum</mark> nonumy eirmod tempor invidunt ut labore et<br>
    dolore magna aliquyam erat, sed diam voluptua.
    </p>
");

Обновите, если вы хотите выделить, вы также можете сделать это с помощью JS

function highlight(text) {
  var inputText = document.getElementById("inputText");
  var innerHTML = inputText.innerHTML;
  var index = innerHTML.indexOf(text);
  if (index >= 0) { 
   innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
   inputText.innerHTML = innerHTML;
  }
}

function highlight(text) {
  var inputText = document.getElementById("inputText");
  var innerHTML = inputText.innerHTML;
  var index = innerHTML.indexOf(text);
  if (index >= 0) { 
   innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
   inputText.innerHTML = innerHTML;
  }
}

.highlight {
  background-color: yellow;
}

<button onclick="highlight('fox')">Highlight</button>

<div id="inputText">
  The fox went over the fence
</div>