JSFiddle - React, Tailwind, and code Playground

HTML

djfkl jsdkfjk dshfjk sdhfjk dhsjkf sdf kljdskfl j
〈some <em>emphasized</em> text〉jk sdjfkl jsdklf jkldsf
<p>dsfhlkdsj 〈some text〉d dskfj klsdjfkl dsf </p>
dfjsdklfdsklfjsdklf
<p><blink>〈some text〉〈some text〉〈some text〉</blink></p>
<marquee>〈some text〉〈some text〉〈some text〉〈some text〉</marquee>

CSS

.booktitle {
    font-size: 2em;
    color: blue;
}
em {
    font-style: italic;
}

JavaScript

// process an element node
function element(node) {
    
    // just process all child nodes
    for (var i = node.childNodes.length; i >= 0; i --) {
        visit (node.childNodes[i]);
    }
    
}

// process a text node
function text(node) {
    
    var re = /(〈)([\s\S]*?)〉/, match,
        start, finish, length, left, middle, right;
    
    // match text
    if (match = re.exec(node.data)) {
        
        // find where to cut
        start = match.index + match[1].length;
        finish = start + match[2].length;
        length = finish - start;
        
        // split text node
        left = node;
        middle = left.splitText(start);
        right = middle.splitText(length);
        
        // wrap the middle text node with a span
        wrap (middle);
        
        // process the rest
        text (right);
        
    }
}

// wraps a node inside <span class="booktitle">node</span>
function wrap(node) {
    var element = document.createElement('span');
    element.className = 'booktitle';
    node.parentNode.insertBefore (element, node);
    element.appendChild (node);
}

function visit(node) {
    
    // where I got the number 1 and 3: http://www.w3schools.com/dom/dom_nodetype.asp
    if (!node) {
        return;
    } else if (node.nodeType == 1) {
        element (node);
    } else if (node.nodeType == 3) {
        text (node);
    }
    
}

visit (document.body);