[ad_1]
Asked
Viewed
9 times
I tried accessing a textarea tag to search and highlight the text but it didn’t work. I’m a newbie, hope you guys can help me.
i want to intervene in textarea tag to search word and highlight word but its quite difficult for a newbie like me, i succeeded when it is a text but its in editor not.
i want to intervene in textarea tag to search word and highlight word but its quite difficult for a newbie like me, i succeeded when it is a text but its in editor not.
i want to intervene in textarea tag to search word and highlight word but its quite difficult for a newbie like me, i succeeded when it is a text but its in editor not.
function findThe(a, b){
console.log(a);
var x = document.getElementById("myTextarea");
if(a){
// var wholeWordOnly = new RegExp("\\g" + a + "\\g","ig"); //Matches whole word only
// var anyCharacter = new RegExp("\\g[" + a + "]\\g","ig"); //Matches any word with any of search chars characters
var x = document.getElementById("myTextarea");
var c = (typeof(b) !== "undefined" && b != null) ? b : document.getElementsByTagName('body')[0];
var d = new RegExp(a, "ig");
var matches = c.innerText.match(d);
if(matches){
if(typeof(document.querySelector('.highlighted')) !== "undefined" && document.querySelector('.highlighted') != null){
for(var i = 0; i < document.querySelectorAll('.highlighted').length; i++){
document.querySelectorAll('.highlighted')[i].outerHTML = document.querySelectorAll('.highlighted')[i].innerText;
}
}
c.innerHTML = c.innerHTML.replace(d, "<span class="highlighted">" + a + "</span>");
if(document.querySelector('.highlighted')){
document.querySelector('.highlighted').scrollIntoView();
}
return true;
}
}
return false;
}
function fSearch(){
if(!findThe(document.getElementById('search-term').value)){
alert("No results found");
}
}.highlighted{background-color:#f1f100}<?php
$text="<h1>At dolor cumque hic dolorem commodi eos facilis ipsum. </h1>
<p>Et odio doloremque est harum possimus est tempore culpa est dolores labore et molestiae laudantium in nesciunt veniam! Ut totam laboriosam ea iste suscipit a voluptate sunt ut eveniet rerum? Ea iusto quia eos possimus nostrum 33 harum dignissimos. Qui dolores possimus <em>Eos galisum rem sequi laboriosam non consequatur voluptatem</em>. Hic minus temporibuseos minima aut eligendi repellat. Qui consequuntur dicta et obcaecati aspernatur sed temporibus iusto non reiciendis ipsum. Et autem excepturi est galisum obcaecati <a href="https://www.loremipzum.com" target="_blank">Aut enim ea libero ipsam ab officia consequuntur</a>. Ut voluptatem ipsa eum quibusdam ipsa et laboriosam quibusdam id consectetur voluptatem et fugit dignissimos cum architecto quaerat. </p>
<ul>
<li>Ut fuga omnis eos internos autem! </li>
<li>Quo nobis nihil sit debitis rerum et libero accusamus. </li>
<li>Est enim similique ut deserunt voluptatem qui sint mollitia. </li>
<li>Qui molestiae tempore ut laboriosam dolorum a libero aspernatur qui sapiente voluptas. </li>
</ul>
<h2>Et similique libero est dolorem ipsam et impedit repudiandae. </h2>
<p>Ut deserunt deleniti non voluptas autem in numquam nulla. Qui voluptates voluptatem quo eligendi debitis non incidunt officiis quo rerum debitis ut eaque animi. Non dolorem cumque qui quasi animi sed animi enim. Ad sint reiciendis ex iste esse ea rerum ipsum aut ipsam similique sed accusantium animi eos doloremque totam? Eum blanditiis animi et consequatur tempora <a href="https://www.loremipzum.com" target="_blank">Aut necessitatibus</a>. Rem ullam omnis et facere obcaecati <strong>Et doloribus hic quisquam earum qui autem odio et labore enim</strong> qui velit vero. Quo dolore dolor qui ratione nulla sed optio nemo. Non voluptates culpa aut quasi aliquam et quibusdam eaque et laudantium nesciunt. </p>
<ol>
<li>Ut molestiae distinctio qui velit tenetur. </li>
<li>Qui possimus excepturi a maiores repellendus sit quibusdam sunt hic nesciunt illo. </li>
<li>Rem dolor tempora sed molestiae quae et quaerat voluptatem. </li>
<li>Ex reiciendis soluta quo iusto omnis aut laboriosam repudiandae et cumque unde. </li>
<li>Non porro aliquid aut nostrum optio. </li>
</ol>
<dl>
<dt><dfn>Et voluptatum sint qui nulla voluptas. </dfn></dt>
<dd>Id doloribus nemo est numquam doloremque. </dd>
<dt><dfn>In minus atque quo debitis numquam. </dfn></dt>
<dd>Non cumque sunt et sunt cumque ex commodi exercitationem! </dd>
<dt><dfn>Et tempora quis et sunt incidunt. </dfn></dt>
<dd>Eos voluptatem asperiores hic iure facere et odio officia? </dd>
<dt><dfn>Sit velit itaque. </dfn></dt>
<dd>Ea corrupti voluptate et dolore iure sed dignissimos accusamus. </dd>
</dl>
<h3>Eum ducimus labore vel doloribus nihil sed blanditiis repellat. </h3>
<p>Non exercitationem voluptatem <em>Nam nulla eum facere Quis ut magni quidem</em> rem facere incidunt. Delectus molestiae id quae ullam qui laboriosam itaque. Vel dolorem adipisci aut dicta assumenda quo enim voluptatibus non recusandae voluptatem. Et doloremque excepturi et minus suscipit est consequatur eveniet qui maiores natus. Et temporibus quam qui atque laborum qui quia voluptas qui iusto quis. At quia sunt ad quae autem aut odit dolores aut rerum quisquam vel repellendus expedita ad deserunt consequatur ut dolor odio. Qui labore odio et pariatur veniamsed animi. Ut dolorem corrupti et natus iure sed expedita tenetur et iure saepe et Quis soluta aut voluptatem officiis. </p>
<blockquote cite="https://www.loremipzum.com">Et modi modi eos voluptas doloribus non nisi culpa et esse eaque! </blockquote>
<pre><code><!-- Et sunt odit vel corporis reprehenderit. --><br><corrupti>Qui asperiores incidunt.</corrupti><br><sint>Non omnis commodi est tempora quia.</sint><br><hic>Aut omnis molestias nam doloribus numquam a voluptas consequatur.</hic><br><et>Et repudiandae error At aliquid modi.</et><br></code></pre>";
?>
<textarea class="form-control tinymce-field-content" id="meta_content" name="content"><?= $text;
?> </textarea>
<form action="#">
<input type="text" id="search-term" />
<button type="submit" id="search-button" onclick="fSearch()">Search!</button>
</form>.highlighted{background-color:#f1f100};
asked 7 mins ago
antopho phieu is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
default
[ad_2]