CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Pandu
Pandu

Reputation: 159

How to find and highlight a text even its tagged in some elements using javascript?

Developed a script for highlighting the text which is linked into the other html page.

 <p>Click <span class="f1"><a href="#myModal" data-reveal-id="myModal">here</a>/span></p>

    <div class="leftspread">
    <p class="table-caption"><span>CHAPTER 4: Vocabulary Checklist</span></p>
    <div id="myModal" class="reveal-modal" ><span style="float:right;"><a class="close-reveal-modal" style="font-size:1.5em;">&#215;</a></span> 
    <div class="voca-head tspace"><strong>CHAPTER 4: Vocabulary Checklist</strong></div>
    <div class="voca">&#x00A0;</div>
    <div class="voca"><a href="page012.xhtml#pg012">business process re-engineering (n)</a></div>
    <div class="voca"><a href="page012.xhtml#pg012">business process</a></div>
    <div class="voca"><a href="page016.xhtml#pg016">business-to-employee (B2E) (n)</a></div>
    <div class="voca"><a href="page033.xhtml#pg033">corporate social responsibility (n)</a></div>
    <div class="voca"><a href="page022.xhtml#pg022">discretion (n), discreet (adj), discretionary (adj)</a></div>
    </div>
    </div>

<script type="text/javascript">
$(document).ready(function(){
    $(document).scrollTop(0);
});
radioBtn();
</script>

List of keyword (above coded in leftspread) will show as popup after click on the text here

enter image description here

In the page012.xhtml:

CSS:

.highlight{ background:yellow; }

html:

<p><span class="glossary">business process re-engineering</span></span></p>

<p><span class="glossary">business process</span></span></p>

Script:

    <script>    
    $(document).ready(function(){
    //alert( window.location.href.split("#")[1] );
    var currentURLString = window.location.href.split("#")[1];
    //currentURLString = currentURLString

    //alert(currentURLString)

    if(currentURLString != undefined){
    $(".glossary").addClass('highlight');       
    }

    //alert(currentURLString);


    });
    </script>

This working fine at our end, but all the text has highlighted yellow wherever defined <span class="glossary"> however click only one word.

enter image description here

But i have to find a specific word which one is clicked from an anchor tag. and some text has coded like below.

<span class="glossary">business pro</span><span class="ls30 lm42 glossary">cess re&#57394;eng</span></span>

It (clicked text only) should be ignored whatever coded around the searching word & highlighted however its coded without any classes.

<span class="ls1 lm41">ation of <span class="f1 s2">business pro</span><span class="ls30 lm42">cess re&#57394;eng</span></span><span class="ls31 lm43">ineering </span></span>

Could any one please fix and resolve this? it would be very helpful and appreciated.

Upvotes: 1

Views: 94

Answers (1)

amansinghgusain
amansinghgusain

Reputation: 774

Why are you using page number #pg012 in fragment <a href="page012.xhtml#pg012">?
You can simply use the whole text which you want to highlight #business process re-engineering (n) in fragment on another page.

<a href="page012.html#business process re-engineering (n)">business process re-engineering (n)</a>

JS

$(document).ready(function () {
  var currentURLString = window.location.href.split("#")[1];
  $("#page012:contains('" + currentURLString + "')").html(function (_, html) {
    var regex = new RegExp("/" + currentURLString + "/g");

    var re = new RegExp(RegExp.escape(currentURLString), "g");
    return html.replace(re, '<span class="highlight">' + currentURLString + '</span>')
  });

});

RegExp.escape = function (text) {
  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
};

I have created a similar plunk. I hope this helps!!

Upvotes: 1

Related Questions