Question

I have different sentences which all have double quotes in them, like:

<h3 class="myClass">Sentence one "ends like this"</h3>
<h3 class="myClass">Sentence two"ends like that"</h3>
<h3 class="myClass">Sentence three "another ending"</h3>

All on a page. Basically all values are differents, and I’m trying to have a line break just before the double quote so it would be like

<h3 class="myClass">Sentence one <br/>"ends like this"</h3>
<h3 class="myClass">Sentence two <br/>"ends like that"</h3>
<h3 class="myClass">Sentence three <br/>"another ending"</h3>

I’m kind of confused on which jQuery function should be used to be honest, between split, text ? Any help would be appreciated , I need to understand how to do this… Many thanks!

Answer 1

You can match the <h3> elements, then pass a function to html(). That function will be called for each element, will be passed the current element’s inner HTML markup, and must return the new markup.

From there, you can use replace() to insert a <br /> element before the first double quote character:

$("h3.myClass").html(function(index, currentHtml) {
    return currentHtml.replace('"', '<br />"');
});

You can test this solution in this fiddle.