Как выделить html-текст с помощью jquery

Question

Я хочу выделить текст страницы html, когда я нажимаю на кнопку.

Он работает, когда соответствующий текст html-страницы не содержит никаких html-тегов. Но он не работает, когда текст html-страницы имеет некоторые теги (например, a, span, strong).

Длинная строка 1 (Simple Text) => Workinh

Long Строка 2 (Simple Text) => Не

Длинные строки 3 (Simple Text)

Long Строка 4 (простой текст)

Html => бла-бла .... бла бла .. ... бла-бла-Long строка 1 (Simple Text "выделены") .... Long строка 2 (Текст с HTML-теги «не подсвечивается ") .... Длинные строки 3 (текст с HTML-теги "не подсвечивается") .... бла-бла ... Длинные строки 4 ....

Ex: Случай 1

Input: Я хочу, чтобы выделить HTML страницы текста

Вывод: Я хочу, чтобы выделить HTML Текст страницы

Пейдж => Я хочу, чтобы выделить HTML Текст страницы

случай 2

Input: Я хочу, чтобы выделить HTML Текст страницы

Выход: не работает

Пейдж => Я хочу выделить HTML-текст

т.е. страницы имеют ту же строку, но имеют сильные тег внутри

любая помощь .. ??

Answer 1

<span class="hilight">Hello</span>&nbsp;world 
<button id="hilight">Hilight</button> 

    $(document).ready(function() { 
     $("#hilight").on('click', function() { 
      $("span.hilight").addClass("your_css_class_to_change_background_color"); 
      //If you use bootstrap 
      $("span .hilight").addClass("badge badge-info"); 
     }); 
    }); 

Answer 2

вы можете выполнить Jquery OnClick функцию и добавить CSS к этому тексту следующим образом:

$(document).ready(function(){ 
    $("button").click(function(){ 
     $("p").css("background","yellow"); 
    }); 
}); 

один раз увидеть, вы получите представление.

Надеюсь, это поможет вам. !! Удачи

Answer 3

Вы можете сделать идентификатор для своих тегов ex.

<p id="test1"></p>    

    <script> 
     $('#submit').on('click','function() { 
      $('#test1').css("color", "red"); 
     }); 
    </script> 

Другой путь вы можете установить в CSS:

p:focus {background: pink;}