jQuery: howto add a <br/> line break in different strings to separate sentences in 2?

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!

Solution 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.

Solution 2

Take a look here to see this code working:

$(".myClass").each(function() {
    var text = $(this).text();
    var q = text.indexOf('"');
    $(this).html(text.substr(0, q) + "<br />" + text.substr(q));
});

Solution 3

I would take a look at the Javascript split() method but in essence you have the right idea. You want to split based on the double quote(\") and that will return you an array of all the splits where a double quote occurs.

So something like this would happen:

var array = $(".myClass").text().split("\""); //array = [Sentence one, ends like this, ];

(Not 100% sure if code is right so someone please check ><)

and then from there you can kind of recreate the text with the included
. At least that's the process of how I would go about it.

Also just remember that the split method does remove the \" from the array (because it uses it as a limiter to split them) so make sure to readd them when you are recreating the text.

As for if Jquery as a specific way of doing this, I'm not sure. If anyone would like to improve my answer, feel free.

Solution 4

Make a function that takes a jQuery object, gets its html, and changes it

function addBR($el) {

Get the element's html

var originalhtml = $el.html();

Split the html by the quotation mark, and join them with a new <br />

var newhtml = originalhtml.split('"').join('<br />"');

Apply the new html

$el.html(newhtml);

And that's it.
Call it with

addBR(jQuery element);

Example: http://jsfiddle.net/XFC5u/

Solution 5

just with some basic javascript (inside a jQuery loop offcourse)

​$(".myClass").each(function() {   // for each item of myClass 
   var text = $(this).text();     // temp store the content
   var pos = text.indexOf('"');   // find the position of the "
   $(this).html(text.slice(0,pos) + '</br>' + text.slice(pos));    // slice before + <br> + slice after = new content
});​​​​​​​​​​

fiddle:
http://jsfiddle.net/JaPdT/

View more solutions