JSFiddle - React, Tailwind, and code Playground

by roeburg

HTML

<link rel="stylesheet" href="http://codeseven.github.io/toastr/toastr.css">
<script src="http://codeseven.github.io/toastr/toastr.js"></script>
<h1>Wildcard Selectors</h1>


<p data-myattribute="1value">data-myattribute="1value"</p>
<p data-myattribute="2value">data-myattribute="2value"</p>
<p data-myattribute="value3">data-myattribute="value3"</p>
<p data-myattribute="value4">data-myattribute="value4"</p>

<p data-myattribute="1mystring2">data-myattribute="1mystring2"</p>
<p data-myattribute="3mystring4">data-myattribute="3mystring4"</p>

<p data-myattribute="cool js">data-myattribute="cool js"</p>
<p data-myattribute="js is cool">data-myattribute="js is cool"</p>
<p data-myattribute="jsiscool">data-myattribute="jsiscool"</p>

<p data-myattribute="jq-prefix-selector">data-myattribute="jq-prefix-selector"</p>
<p data-myattribute="prefix-jq-selector">data-myattribute="prefix-jq-selector"</p>
<p data-myattribute="selector-prefix-jq">data-myattribute="selector-prefix-jq"</p>

JavaScript

$(function () {
    alert("Inspect the paragraphs closely before closing this");


    // Prefix Match
    setTimeout(function () {
        $('[data-myattribute^="value"]:first').before("<hr />");
        $('[data-myattribute^="value"]:first').before("<h2>Looking for pattern <u>[value*]</u> and change color to red</h2>");
        $('[data-myattribute^="value"]').css("color", "red");

    }, 1000);

    // Suffix Match
    setTimeout(function () {
        $('[data-myattribute$="value"]:first').before("<hr />");
        $('[data-myattribute$="value"]:first').before("<h2>Looking for pattern <u>[*value]</u> and change color to blue</h2>");
        $('[data-myattribute$="value"]').css("color", "blue");
    }, 3000);


    // Contains Match
    setTimeout(function () {
        $('[data-myattribute*="mystring"]:first').before("<hr />");
        $('[data-myattribute*="mystring"]:first').before("<h2>Looking for pattern <u>[*mystring*]</u> and change color to blue</h2>");
        $('[data-myattribute*="mystring"]').css("color", "brown");
    }, 5000);
    
    // Contains Single or space delimited word
    setTimeout(function () {
        $('[data-myattribute~="cool"]:first').before("<hr />");
        $('[data-myattribute~="cool"]:first').before("<h2>Looking for word <u>[cool (single or space delimited word)]</u> and change color to green</h2>");
        $('[data-myattribute~="cool"]').css("color", "green");
    }, 6000);
    
    // Contains Single or space delimited word
    setTimeout(function () {
        $('[data-myattribute|="jq"]:first').before("<hr />");
        $('[data-myattribute|="jq"]:first').before("<h2>Looking for pattern <u>[jq is a prefix followed by -]</u> and change color to grey</h2>");
        $('[data-myattribute|="jq"]').css("color", "grey");
    }, 7000);
});