Use rangy.cssClassApplier to apply a class to a string

Question

How could I use rangy.cssClassApplier to apply a class to a string? Thanks

Answer 1

You can't directly. Rangy CSS class appliers only work on DOM.

You could add your HTML string to a temporary element instead, apply a CSS class and remove it again.

Live demo: http://jsfiddle.net/Ta3ta/

Code:

function applyCssClassToHtml(cssClass, html) {
    rangy.init();
    var cssClassApplier = rangy.createCssClassApplier(cssClass);
    var div = document.createElement("div");
    div.innerHTML = html;
    document.body.appendChild(div);
    var range = rangy.createRange();
    range.selectNodeContents(div);
    cssClassApplier.applyToRange(range);
    range.detach();
    document.body.removeChild(div);
    return div.innerHTML;
}

var html = applyCssClassToHtml("someClass", "Hello <b>world</b>");