javascript jQuery：如何在不同的字符串中添加 <br/> 换行符以分隔 2 中的句子？

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

提问by mlclm

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!

老实说，我对应该使用哪个 jQuery 函数感到困惑，在 split 和 text 之间？任何帮助将不胜感激，我需要了解如何做到这一点......非常感谢！

回答by Frédéric Hamidi

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.

您可以匹配<h3>元素，然后将函数传递给html()。将为每个元素调用该函数，将传递当前元素的内部 HTML 标记，并且必须返回新标记。

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

从那里，您可以使用replace()<br />在第一个双引号字符之前插入一个元素：

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

You can test this solution in this fiddle.

您可以在这个 fiddle 中测试这个解决方案。

回答by Erick Petrucelli

Take a look hereto 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));
});

回答by Overcode

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

制作一个接受 jQuery 对象、获取其 html 并对其进行更改的函数

function addBR($el) {

Get the element's html

获取元素的html

var originalhtml = $el.html();

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

用引号将 html 拆分，并用新的 <br /> 加入它们

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

Apply the new html

应用新的 html

$el.html(newhtml);

And that's it.
Call it with

就是这样。
调用它

addBR(jQuery element);

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

示例：http: //jsfiddle.net/XFC5u/

回答by aug

I would take a look at the Javascript split() methodbut 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.

我会看看Javascript split() 方法，但本质上你有正确的想法。您想根据双引号 (\") 进行拆分，这将返回一个包含所有出现双引号的拆分的数组。

So something like this would happen:

所以会发生这样的事情：

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

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

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

（不是 100% 确定代码是否正确，所以请有人检查 ><）

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.

还要记住，split 方法确实从数组中删除了 \"（因为它使用它作为限制器来拆分它们），因此请确保在重新创建文本时阅读它们。

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.

至于 Jquery 是否作为这样做的特定方式，我不确定。如果有人想改进我的答案，请随意。

回答by Pevara

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

只需使用一些基本的 javascript（在 jQuery 循环中）

?$(".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/

小提琴：http:
//jsfiddle.net/JaPdT/

回答by ChrisThompson

$('.myClass').each(function(){ 
    if($(this).text().indexOf('"') >=0 ){  
        $(this).text( $(this).text().replace('"', '<br/>"')  )   
    }
})