Find & Replace

by kthornbloom

HTML

<div class="editor" contenteditable="true">
Here <i>is</i> my <b>sample</b> text. That sample text is all over the place, here.
</div>

<table>
  <tr>
    <td>Find</td>
    <td>Replace</td>
    <td></td>
  </tr>
  <tr>
    <td>
      <input type="text" id="find" placeholder="Find" value="sample text">
    </td>
    <td>
      <input type="text" id="replace" placeholder="Replace" value="pineapple">
    </td>
    <td>
      <button id="initiate">GO</button>
    </td>
  </tr>

</table>

CSS

.editor {
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
    outline: none;
}

table {
    border-collapse: collapse;
}

td {
    border: 1px solid #ccc;
    padding: 2px;
}

JavaScript

function findandreplace() {
    var text = $('.editor').html(),
        find = $('#find').val(),
        replace = $('#replace').val(),
        newText = text.replace(new RegExp(find, "g"), replace)
    $('.editor').html(newText);
}

$(document).on('click', '#initiate', function() {
    findandreplace();
});