針對全文透過JS來做重點標示

在前陣子有個Case是要處理搜尋結果頁的部分,要將搜尋出來的內容利用關鍵字進行Highlight,所以有了下面這個範例,是利用正規表示法+JS進行處理,會無視搜尋關鍵字的大小寫,若要區分大小寫可將第45行中的gi,改為g就好,以下是範例頁面的Code,也可以直接連結到範例頁面試試看。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Highlight Text Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
        .f-red{
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="input-group mb-3">
				<input type="text" id="hightlightText" value="我" class="form-control">
				<div class="input-group-append">
				<button class="btn btn-primary" type="button" id="activeBtn">Button</button>
			</div>
		</div>
		</div>
		<div id="content" class="row"></div>
	</div>
</body>
</html>
var htmlText = "";
$.ajax({
    url: "highLightText.txt",
    async: false,
    success: function(response){
        htmlText = response;
    }
});
$("#content").html(htmlText);

var hightlightText = $("#hightlightText").val();
$.fn.highlight = function(what,spanClass) {
    return this.each(function(){
        var container = this,
            content = container.innerHTML,
            pattern = new RegExp('([<.]*)(' + what + ')([<.]*)','gi'),
            replaceWith = '$1<span ' + ( spanClass ? 'class="' + spanClass + '"' : '' ) + '">$2</span>$3',
            highlighted = content.replace(pattern,replaceWith);
        container.innerHTML = highlighted;
    });
}
$('#content').highlight(hightlightText,'f-red');

$("#activeBtn").click(function(){
    $("#content").html(htmlText);
    var hightlightText = $("#hightlightText").val();
    $('#content').highlight(hightlightText,'f-red');
});
<p>給到王平銀日持風臺色營對合我過友的、造也在乎費靜臺白國:投無心面策一十人力委了可來沒?動區雲溫好面些、味又動高兒可來成的常他告臺布來處本我:界沒乎真不下老關,業實了種童不成他神舉經公黑下方、小利頭適不保講以心感校趣facebook不他到代易上海。一設開物愛研題來一下一國該要、機出又際各內案名相落的沒上年水部求沒山大式理密。房長裡再造級……童面費後務,風一也本名。太一息品的看統配北心他合情分子的經易民告只?</p><p>進安太,狀立?</p><p>文它接。於能病到腦反的題光,異卻道華找重有地北得了,去她定究愛,局自明加汽容看google及兒已的facebook兩:未不乎動常看選的所國半成著坐靈人一本成英一環處教時告即小!後也臺市開半:技月家,展教子、起構的相要從王排,臉外產便上。運自片同合可家小的部方單美哥人頭讀更外前喜民,有不馬的,你風的;心說火來的……全起飛事影。</p><p>拉為三參。體成和正地該名玩公可等Google學素母為收營……時世的回過高布家不生世存故研,為親總手?行眼長藝想海能和門新小認中日每收交金又成Facebook來而出還內界官我告展了戲有了的的?</p><p>由在下代保不著春原還其元上計一中合小,合的難修技空麼母於車當為下大灣的更吸如果中法照日目Facebook評一種父魚,目發體必詩遊完到往她數他來們標民。有西加邊,的已明得國多、的且看花性小下時都葉輪我後?觀復大物則的示的戰品照!失分量認法。而日媽運那麼個,名目石師越慢面我的古望科流身代安次野大的大深為坡打南發入定筆境產飛東資再變新西一滿價由親爭水道不合不性,google去實差來。球寶的了放車早大馬產場到使引是名最少不人經進人聲經光我,活連第,風軍工星費書它出。情會了每記、能時外社班們人第底月草。股本我google也。是不大日生未向心獲投時成到告平一樣爸音裡使上後讀如推其界明國報問小國快,打問盡自;裡物候小的了民品著家爭行全位?這時的足子一可等學讀不其今當前生好年點自星我藝資做精只基家他命方資前能一們?facebook美十本世高月有量用不善大一王毒跑們這們其可理出一樣規加還人和其寶再西因觀文葉態,灣木學定,個一知論參細已車不;但地口不別的務際千信記車南的、在營該科讓,我子機數年原是紅戰動感問象易一人所消登衣以他型新三。童愛早十以民國止最時構空夜包害石識小導開Google足活。都是身也個紙失八模用精想修速情不散靜到了小神幾會比找銷消之:行的結星才山風人地。山情資器產們這還上想明生。</p><p>調活前育她一來資!車各向進方加取而向成:使知過不,賽舉師皮;早而運星傳等之是法死技斯身不放facebook也日綠手上,不還國、紅球色統形不發過青展國,運市包,雜開基民場操造奇證;地的會沒工星人去,我作感影她創書處營器病……期有生寫看果公們工張,什館進因了入麼對體算兒低汽?靜但開目地、好久我期展今視義本:政義相會位例皮,加情地分朋學客助……年認校分存片常一是。</p><p>刻爾全否便,此前大檢生生回電性其供假調神約獎因突自阿的。</p>

實際動手玩看看↓↓

You may also like...

394,456 Responses

  1. Waltererync表示:

    sildenafil oral jelly 100mg kamagra: cheap kamagra – Kama Pharm

  2. AlbertNer表示:

    https://predpharm.com/# Pred Pharm
    prednisone 2.5 mg price

  3. Ozzyfut表示:

    drug markets dark web darknet market

  4. Waltererync表示:

    rybelsus semaglutide tablets: SemaPharm24 – buy rybelsus online

  5. Johnnyfut表示:

    darknet drug market https://github.com/darknetmarkets24/darknet-markets – darkweb marketplace

  6. Waltererync表示:

    buy rybelsus online: SemaPharm24 – rybelsus semaglutide tablets

  7. louisezr3表示:

    Limestone college clips popped up on pornhub and the
    http://valery45.fleischigen.hotblognetwork.com/?estefany-elaina

    videobash porn teen girls first lesbian sex porn legend of zelda porn movie free porn videos mistress matriesse xxx porn images videos

  8. Andrenus表示:

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

    Типы мед центров в Москве

    1. Частные клиники: Личные медицинские центры в городе москва предлагают услуги высшего качества с меньшими очередями и поболее персонализированным подходом. Они часто оснащены современным оборудованием и предлагают услуги по очень высочайшим стандартам.

    2. Муниципальные медицинские учреждения: Эти поликлиники чаще всего доступны для граждан через систему неотклонимого медицинского страхования (ОМС). Государственные учреждения могут иметь огромные перечни ожидания, но обеспечивают доступ к базисным медицинским услугам.

    3. Спец центры: В Москве также действуют медицинские центры с тесной квалификацией, такие как стоматологии, dermatологии, онкология, репродуктивные технологии и т. д. Эти учреждения предлагают спец услуги, основанные на самых последующих научных разработках.

    Превосходства мед центров в городе москва

    – Квалификация докторов: Многие спецы имеют высшую степень и значимый опыт работы, что гарантирует высокий уровень медицинской помощи.

    – Современное оборудование: Большая часть медицинских центров оборудованы новыми технологиями и аппаратурами, что повышает качество диагностики и исцеления.

    – Широкий спектр услуг: Клиники предлагают не только лишь диагностику и лечение, но и профилактические меры, реабилитацию и оздоровительные процедуры.

    Как выбрать медицинский центр в городе москва?

    В момент выбора мед центра стоит учесть последующие рекомендации:

    – Отзывы и репутация: Выучите отзывы пациентов, чтоб осознать уровень предоставляемых услуг Клиники в Москве

    – Квалификация специалистов: Направьте внимание на квалификацию лекарей, их трудовой стаж и участие в научных исследованиях.

    – Оснащение клиники: Узнайте, насколько современное оборудование используется в больнице.

    – Положение и доступность: Выбирайте медицинские центры, расположенные недалеко к вашему месту жительства либо работы для наилучшего удобства.

    Заключение

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

  9. Medicines information. What side effects can this medication cause?
    celebrex or meloxicam
    Everything information about meds. Read information here.

  10. Waltererync表示:

    п»їcytotec pills online: buy cytotec pills online cheap – buy cytotec online

  11. Dannyfut表示:

    how to get on dark web dark market 2025 how to access dark web

  12. RonnieLerry表示:

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

    Что есть индивидуалки-эскортницы?

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

    Преимущества личных эскортниц

    1. Личный подход: Работающие индивидуально, эскортницы могут лучше удовлетворить потребности своих клиентов, предлагая personalized services.

    2. Разнообразие услуг: Индивидуалки могут предложить широкий спектр услуг, от романтических встреч до более откровенных предложений.

    3. Прямое общение: Общение с индивидуалкой нередко менее формальное, что дает возможность сделать расслабленную атмосферу и резвее найти точки приткновения.

    Как выбрать индивидуалку-эскортницу?

    В момент выбора индивидуалки-эскортницы в Москве необходимо учесть несколько важных моментов:

    – Репутация: Изучите отзывы клиентов. Это поможет избежать нежелательных ситуаций и выбрать надежную партнершу.

    – Портфолио: Многие эскортницы публикуют свои фотографии и описания услуг. Направьте свой взгляд на наружный вид, чтобы выбрать наиболее привлекательный вариант.

    – Обсуждение критерий: Перед встречей непременно обсудите все детали цена, продолжительность, места встреч и желаемые услуги https://www.sbnation.com/users/KarlaMclaughlin

    Безопасность и правовые нюансы

    Важно помнить, что услуги эскортниц могут находиться в сероватой зоне законодательства. Поэтому нужна осмотрительность как со стороны клиентов, так и со стороны женщин. Безопасность обязана быть ценностью: используйте испытанные источники, выбирайте публичные места для встреч и соблюдайте меры предосторожности.

    Заключение

    Индивидуалки-эскортницы в Москве это удачный и часто востребованный метод провести свободное время в компании привлекательной дамы. Однако принципиально подходить к выбору осознанно, учитывая все нюансы и соблюдая меры безопасности. В самом конце концов, удовольствие от общения и время, проведенное с эскортницей, должны приносить положительные эмоции и ублажение.

  13. jackieyj18表示:

    Sleeping mom is woken up by something huge crawling inside
    https://prostate-cum-spit-fetish.fetish-matters.net/?stephanie-aaliyah

  14. LarryLog表示:

    semaglutide best price: Sema Pharm 24 – buy semaglutide

  15. Medication information. Long-Term Effects.
    can you buy generic sinemet online
    Best what you want to know about meds. Get information here.

  16. Dannyfut表示:

    dark websites dark web market links darknet links

  17. Michaelabaft表示:

    перейти на сайт
    GIZBO

  18. biller18表示:

    Best interactive porn games of 2020 adultgamingroom
    http://freew.sexjanet.com/?tatum-dana

    old women young boy porn deep throut porn free famous porn starr delete porn linux mature black women porn clips

  19. мегафон домашний интернет екатеринбург
    https://ekb-domasnij-internet.ru
    мегафон телевидение

  20. Dannyfut表示:

    black internet deep dark web dark web market

  21. Dannyfut表示:

    bitcoin dark web darkmarket darkmarket list

  22. Brittlet表示:

    Responsible gambling is a crucial aspect of the gaming industry that emphasizes the need for safe gaming practices, prevention of problem gambling, and addressing gambling addiction. As gaming becomes more accessible through online platforms and mobile devices, it is essential for both operators and players to prioritize responsible gambling to ensure a safe and enjoyable experience.

    What is Responsible Gambling?

    Responsible gambling refers to actions taken by individuals, organizations, and gaming operators to promote safe gaming practices and mitigate the risks associated with gambling. It encompasses various strategies that aim to prevent problem gambling and support individuals facing gambling addiction. Key elements include:

    – Education and Awareness: Providing information about gambling risks and encouraging informed decision-making.

    – Support Resources: Offering access to resources for individuals who may experience gambling-related problems.

    – Policy Frameworks: Establishing guidelines and policies to ensure that gambling operations promote responsible practices.

    Safe Gaming Practices

    Implementing safe gaming practices can help protect players and foster a responsible gambling environment. Essential practices include:

    – Setting Limits: Players should establish limits on their time, spending, and bets to avoid excessive gambling. Operators can facilitate this by offering tools for limit-setting.

    – Self-Exclusion Options: Providing options for players to voluntarily exclude themselves from gambling activities if they feel they are losing control.

    – Recognizing Signs of Problem Gambling: Encouraging players to be aware of the signs of problem gambling, such as increased secrecy about gambling habits or a growing preoccupation with gambling.

    Problem Gambling Prevention

    Preventing problem gambling involves proactive measures aimed at addressing potential issues before they escalate. Strategies include:

    – Education Campaigns: Running campaigns to educate players about responsible gambling and the risks of addiction.

    – Incorporating Game Design: Designing games with features that promote positive gambling behaviors, such as reminders about time spent playing.

    – Training for Staff: Educating casino staff and online support teams to recognize signs of problem gambling and respond appropriately.

    Gambling Addiction

    Gambling addiction, or compulsive gambling, is a serious condition that can have devastating effects on individuals and their families. Recognizing and addressing gambling addiction is vital for prevention efforts. Key considerations include:

    – Symptoms of Gambling Addiction: Awareness of symptoms like an inability to stop gambling, lying about gambling activities, or using gambling as an escape from problems sustainable gambling

    – Support and Treatment: Promoting access to treatment options, including counseling and support groups, for individuals struggling with gambling addiction.

    – Community Involvement: Encouraging community initiatives and support networks to assist those affected by gambling addiction, fostering a sense of belonging and support.

    Conclusion

    Responsible gambling is a collective responsibility that requires the commitment of players, operators, and regulators. By promoting safe gaming practices, preventing problem gambling, and effectively addressing gambling addiction, the gaming industry can create a healthier and more sustainable environment. As awareness of responsible gambling grows, it is essential to continue developing and implementing strategies that protect players and ensure that gambling remains a fun and entertaining activity.

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。