Question

I need to replace the dash in a title on by site with a span tag and line break to break to title over two lines.
Unfortunately I don’t have access to do this in the PHP 🙁

The below statement seems to do this. Although with bugs as it’s making this change to the character throughout the page.

document.body.innerHTML = document.body.innerHTML.replace(/\u2013/g, "</span><br /><span>");

The jQuery solution I tried below, works but sometimes the element would have a visibility hidden on the element!

$("#events h3 a").each(function() {
  $(this).html($(this).html().replace(/\u2013/g,"</span><br /><span>"));
});

Ideally I would like to use the pure JavaScript version above but need help navigating to the Events Link.

#events h3 a

Thanks anybody who can help, I have hunted for a solution everywhere.

This is an example of the page structure. And explains why the span close and start are back to front in the code excerpt. This is so each half can be styled when on separate lines.

<ul id="events">
    <li>
        <h3>
            <a href="http://example.com">
                <span>First Events Title - On Every Sunday</span>
            </a>
        </h3>
    </li>
    <li>
        <h3>
            <a href="http://example.com">
                <span>Second Events Title - On Every Monday</span>
            </a>
        </h3>
  </li>
</ul>

Answer 1

It seems so simple, is this a trick question? If it as simple as i thought try this.

$(function () {
    $("#events h3 a").each(function () {
        $(this).html($(this).html().split(" - ").join("</span><br/><span>"));
    });
});