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

Question

我有不同的句子，其中都有双引号，例如：

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

全部在一个页面上。基本上所有的值都是不同的，我试图在双引号之前换行，所以它会像

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

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

Answer 1

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

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

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

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

Answer 2

看看这里看看这个代码工作：

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

Answer 3

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

function addBR($el) {

获取元素的html

var originalhtml = $el.html();

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

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

应用新的 html

$el.html(newhtml);

就是这样。
调用它

addBR(jQuery element);

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

Answer 4

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

所以会发生这样的事情：

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

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

然后从那里你可以重新创建包含的文本
。至少这是我将如何去做的过程。

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

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

Answer 5

只需一些基本的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
});​​​​​​​​​​

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

Answer 6

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