DOM manipulation while preserving previous handlers

Question

The problem:

Let's say I have a div with a text like this

<div id=”bla”>One Two Three Four Five</div>

I want to be able programmatically take any substring and wrap it into a <div> with some handler attached to it (say onlick). I want to be able to do it multiple times to different part of the text so in the end my div can end up looking like this:

<div id=”bla”>One <div id=”bla2”>Two</div> Three <div id=”bla4”>Four</div> Five</div>

The problem is how to do it?

Some thoughts:

Potentially, if I want to wrap the string Two into div, then if I just take whole div content using html(), do substring before and after Two, then do .empty() on the div and .append(beforeSubstring, <Two wrapper with some handler>, afterString) – it looks good, but it will put the beforeSubstring and afterSubstring into “” and remove all previous handlers. But I want to keep previous handlers and I don’t need “” since it messes things up for me.

Any thoughts? :)

Answer 1

You first need to cache your element's content like var cont = $("#bla").text();
than always use that cont before inserting your wrappers (using RegExp I suppose...) and placing the result back into that element like $("#bla").html(regexModifiedCont);

Example:

var $contentEl = $("#bla");
var content = $contentEl.text(); // Cache the original content!

$("#query").on("input", function(){
  var reg = new RegExp("("+  $.trim(this.value) +")", "ig");
  $contentEl.html( content.replace(reg, "<span class='clickable'>$1</span>") );
});

$("body").on("click", ".clickable", function(){
  alert( $(this).text() );
});

.clickable{
  background:gold;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Write a text to take <input id=query type=text>
<div id=bla>One Two Three Four Five</div>

Answer 2

Perhaps you're looking for something like this? =)

  function wrapTag(string, tag) {
    return '<'+tag+'>' + string + '</'+tag+'>';
  }

  // http://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text
  function getSelectionText() {
      var text = "";
      if (window.getSelection) {
          text = window.getSelection().toString();
      } else if (document.selection && document.selection.type != "Control") {
          text = document.selection.createRange().text;
      }
      return text;
  }      

  function highlightSelection(tag) {
    var highlighted = getSelectionText();
    var newContent = $('#paragraph').html()
                      .replace(/\s+/g,' ').trim()
                      .replace(highlighted, wrapTag(highlighted, tag));
    $('#paragraph').html(newContent);
  } 

Working example: http://plnkr.co/edit/VCpGScPR9TEjuY3mtP2j?p=preview