Highlighted Search Term

Developer
Tommy Hodgins
Size
3,677 Kb
Views
34,408
  1. Highlighted Search Term Previews
  2. Highlighted Search Term HTML Codes
  3. Highlighted Search Term CSS Codes
  4. Highlighted Search Term JS Codes

How do I make an highlighted search term?

What is a highlighted search term? How do you make a highlighted search term? This script and codes were developed by Tommy Hodgins on 11 July 2022, Monday.

Highlighted Search Term Previews
IQ Test

Highlighted Search Term - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Highlighted Search Term</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<script> document.documentElement.setAttribute('data-theme','dark')
</script>
<style>
p, div, article, aside, section { font-size: 12pt; margin-bottom: .7em;
}
</style> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600,700,900'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900,900italic'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic'>
<link rel='stylesheet prefetch' href='http://staticresource.s3.amazonaws.com/template/css/basic.css'>
<link rel='stylesheet prefetch' href='http://staticresource.s3.amazonaws.com/template/plugins/buttons/data-buttons.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Highlighted Search Term</h1>
<h2>Using JavaScript</h2>
<!-- Dummy Content -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div>Donec fermentum augue sem. Sed eleifend, erat a venenatis euismod, felis arcu tempus quam, imperdiet vestibulum ipsum orci eget dui. Praesent semper commodo urna, vitae sodales tellus aliquet a. Suspendisse varius condimentum enim id ornare. Mauris porttitor interdum sem et convallis. Cras dictum, diam ut feugiat bibendum, tortor tellus aliquet massa, pulvinar posuere tortor enim vitae turpis. Sed ultrices augue turpis, et pellentesque est sagittis in. Aliquam ac quam nibh. Quisque et fringilla dolor. Nullam massa ipsum, semper convallis purus sit amet, mollis interdum leo. Vivamus ut tempor nunc.</div>
<article>Nunc finibus lacus eget orci pellentesque lacinia. Nullam vitae dui facilisis, venenatis velit vehicula, fringilla eros. Vestibulum interdum nulla eu nunc convallis rhoncus. Sed eget sapien magna. Nam quis finibus velit, eu dictum mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam et libero quis velit consectetur lobortis. Donec a libero vel mauris faucibus porta.</article>
<aside>Vestibulum malesuada pulvinar dolor vitae eleifend. Nunc maximus quam et tempus tempus. Cras tempus nibh quam, vitae sodales nisi egestas laoreet. Aenean sed tincidunt ex. Pellentesque blandit pharetra arcu, non volutpat nunc dapibus ut. Suspendisse convallis at nunc sit amet euismod. Suspendisse non sem elit. Ut pharetra enim in purus porttitor facilisis mollis ut nisl. Sed varius semper sollicitudin. Nullam aliquam sodales pulvinar. Nam tellus sapien, hendrerit ac mollis eget, rhoncus a diam.</aside>
<section>Nunc eu lorem vitae nisl laoreet imperdiet. Etiam nunc velit, auctor ut felis id, vestibulum efficitur quam. Pellentesque commodo sit amet velit ut accumsan. Ut malesuada lacinia arcu, volutpat accumsan lorem rutrum ac. Integer tincidunt dui a neque accumsan, ut hendrerit leo cursus. Nulla sed mollis tortor, vitae luctus odio. Praesent gravida sed mauris ac laoreet. Pellentesque a lorem purus. Ut tincidunt ante ac nibh maximus, et suscipit risus sagittis. Nullam rhoncus augue eu semper ultrices. Quisque nec mollis ex. Suspendisse potenti.</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/eqcss/1.1.0/EQCSS-polyfills.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/eqcss/1.1.0/EQCSS.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Highlighted Search Term - Script Codes CSS Codes

[data-highlight] { display: inline-block; padding: 0 .2em; border-radius: .2em; color: rgba(0,0,0,.8); background: gold;
}

Highlighted Search Term - Script Codes JS Codes

// Highlight terms on page load
document.addEventListener('DOMContentLoaded',createHighlight)
// List selector(s) to scan for highlighting as strings in an array
var selectors = [ 'p', 'div', 'article', 'aside', 'section'
]
// List term(s) to highlight as strings in an array
var terms = [ 'elit', 'non', 'sit'
]
// Highlight term(s) inside selector(s)
function createHighlight(){ // For each selector for (selector=0; selector<selectors.length; selector++) { var tags = document.querySelectorAll(selectors[selector]) // For each instance of that selector for (tag=0; tag<tags.length; tag++) { // For each term to highlight for (term=0; term<terms.length; term++) { var match = new RegExp(terms[term],'gi') // case insensitive // Find any matched terms and wrap in a <span> tags[tag].innerHTML = tags[tag].innerHTML.replace(match,'<span data-highlight>$&</span>') } } }
}
// Clear highlighted term(s)
function clearHighlight(){ var found = document.querySelectorAll('[data-highlight]') for (i=0; i<found.length; i++){ found[i].outerHTML = found[i].innerHTML }
}
Highlighted Search Term - Script Codes
Highlighted Search Term - Script Codes
Home Page Home
Developer Tommy Hodgins
Username tomhodgins
Uploaded July 11, 2022
Rating 4
Size 3,677 Kb
Views 34,408
Do you need developer help for Highlighted Search Term?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tommy Hodgins (tomhodgins) Script Codes
Name
Basic HTML Slideshow
My CSS Wishlist
Responsive Scrolling Sticky Header
CSS Parent Selector
Amazing Reviews
A Parent Selector for CSS
Cursor-Based Box-Shadow with EQCSS
Matching height via EH units
Element Query Demo with EQCSS
10 CSS Text Shadows
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!