Replace only words inside a paragraph

Question

I am using a regex replace to <mark></mark> input text. The problem I am running into is that it takes all text from a holder div and replaces it into a variable and adds the mark tags. Then places it back into the div holder. When I do this, if I type in "<p>", it highlights the actual <p> and outputs it back into the div.

Is there anyway to get around this? Here is my marking code:

function Search() {
    var Notes = document.getElementById("NoteHolder").innerHTML;
    var i = document.getElementById("Bar").value;
    var inputReOne = $.trim(i);
    var inp = inputReOne.replace(".", "\.").replace("<", "").replace(">", "").replace(
        "/", "").replace(/\\/, "");
    document.getElementById("Bar").value = inp;
    if ($.trim(inp) !== '') {
        var InpComp = inp.toUpperCase();
        var Ind = tags.indexOf(InpComp);
        if (Ind === -1) {
            var inpReg = new RegExp(inp, "im");
            var WordCheck = Notes.match(inpReg);
            if (WordCheck !== null) {
                tags.push(InpComp);
                var SearchReq = new RegExp("(" + inp + ")", "gim");
                var after = Notes.replace(SearchReq, "<mark class=" +
                    ColorOptionReady + ">$1</mark>");
                document.getElementById("NoteHolder").innerHTML = after;
            }

HTML:

<body>
   <div> 
       <p id="form"> 
           <input class="SearchInp" autocomplete="off" id="Bar" name="Input" type="text" placeholder="Search for word or phrase"> 
           <input class="SearchInp" type="submit" id="sea" onClick="Search ()" value="Search"> <div id="NoteHolder">
       </p>
       <p class="NoteOp" id="NoteOne">This is a test paragraph uses to TeSt filters.</p> 
       <p class="NoteOp" id="NoteTwo">Random words, I need to see if it will mess up mark</p> 
   </div>
<script src="Test.js"></script>
<script   src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">    </script>
</body>

That first line in your function could use `.textContent` instead. PS: I don't know if you've seen [the famous Zalgo answer about HTML+Regex](http://stackoverflow.com/a/1732454/2773837). — Hatchet, Mar 11 '16 at 22:18
@Hatchet How would I keep the same placement though? If I have two paragraphs and I use this (It works), how would I add the `
` tags back? — Hawkeye, Mar 11 '16 at 22:21
Could you post your HTML (maybe add as a snippet)? That would help some. — Hatchet, Mar 11 '16 at 22:24
@Hawkeye you can edit your original question. I think that would be clearer than leaving the code in a comment :) — Niels Abildgaard, Mar 11 '16 at 22:42
@franklin Some of the code wasn't indented far enough! Thanks for noticing! — Hawkeye, Mar 11 '16 at 22:49

score 0 · Answer 1 · answered Mar 11 '16 at 22:53

0

Rather than searching and replacing in the #NoteHolder element, why not loop through each .NoteOp and replace in there?

function search() {
  var notes = document.getElementsByClassName("NoteOp");
  var s = document.getElementById("Bar").value.trim();
  for (var i = 0; i < notes.length; i++) {
    var n = notes[i];
    n.innerHTML = n.textContent.replace(new RegExp("(" + s + ")", "gim"), "<mark>$1</mark>");
  }
}

<input class="SearchInp" autocomplete="off" id="Bar" name="Input" type="text" placeholder="Search for word or phrase">
<input class="SearchInp" type="submit" id="sea" onClick="search()" value="Search">
<div id="NoteHolder">
  <p class="NoteOp" id="NoteOne">This is a test paragraph uses to TeSt filters.</p>
  <p class="NoteOp" id="NoteTwo">Random words, I need to see if it will mess up mark</p>
</div>

Note: Storing the contents of each .NoteOp in an object, working with the text in there and simply setting the content of each .NoteOp after every search would be easier and cleaner.

answered Mar 11 '16 at 22:53

Hatchet

5,320
1
30
42

Works great but would there be a way to maintain previous inputs? So if I search up "uses" then I search "test" keep "uses" marked and add "test" to the marks. – Hawkeye Mar 12 '16 at 16:29
The problem now is that if I have a search (Let's say `test`), then I search `mark` it highlights the actual mark tag but I still want it to save pervious searches. Any suggestions? – Hawkeye Mar 12 '16 at 19:34
@Hawkeye Keep an array of searches. – Hatchet Mar 12 '16 at 21:38
I do have one already but how would I loop it to search for all again? – Hawkeye Mar 12 '16 at 22:24
@Hawkeye Right now the regex is `new RegExp("(" + s + ")", "gim")`. After adding `s` to the array of searches, change that line to `new RegExp("(" + searches.join("|") + ")", "gim")`. – Hatchet Mar 12 '16 at 22:31
Now I am at the problem that I am using another function that adds the color class. I want it to maintain the color. – Hawkeye Mar 12 '16 at 23:00
@Hawkeye If you have a different problem, please ask another question. – Hatchet Mar 12 '16 at 23:19
Ok, I fixed it. I decided just to add the `\b` selector onto the regex to avoid the actual html marking. – Hawkeye Mar 13 '16 at 02:46

Replace only words inside a paragraph

1 Answers1