New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus, lacus ac pellentesque tincidunt, tortor libero laoreet sapien, eu ornare urna nunc tincidunt ipsum. Mauris elementum, lectus ut facilisis pulvinar, enim sapien pretium diam, eleifend elementum tellus diam in quam. Aenean dignissim ipsum aliquam, consectetur massa sit amet, dignissim nulla. Sed ex diam, dictum dapibus lacinia ac, viverra at tellus. Nunc vehicula lorem sit amet luctus bibendum. Vivamus fringilla metus eget venenatis malesuada. Praesent auctor risus ut dictum maximus. Proin quis vestibulum sapien. Vivamus fringilla, felis eu fringilla faucibus, diam ante euismod enim, nec ultrices elit mi eget justo. Vivamus id porttitor turpis. Phasellus sed nisl est. Sed fermentum suscipit justo, id vehicula quam tempor vitae.`
});

helpers.highlight-text.js

import Ember from 'ember';

const {
  String: { htmlSafe }
} = Ember;

export function highlightText([keyword, content]/*, hash*/) {
  let highlighted = highlight(keyword, content);
  
  return htmlSafe(highlighted); 
}

function highlight(keyword = '', content = '') {
	if(keyword === '' || content === '') {
  	return content;
  } else {
    let toMatchKeyword = keyword.split(' ');
    if(toMatchKeyword.length > 1) {
      let match = new RegExp(toMatchKeyword.join('|'), 'g');
      return content.replace(match, `<span class="highlighted">${keyword}</span>`);
    } else {
      let match = new RegExp(keyword, 'g');
    return content.replace(match, `<span class="highlighted">${keyword}</span>`);    
    }
  }
}

export default Ember.Helper.helper(highlightText);

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.highlighted {
	background-color: yellow;
  font-weight: bold;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1><br>

{{input type="text" value=value }}
<br><br>
<div class="content">
	{{highlight-text value content}}
</div>

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {}
}