Question

我正在寻找一种方法，使用jQuery在<br />中的第一个或有时第二个单词之后插入<div>标记。

例如，鉴于此：

<div class="title">Brand Name Shampoo & conditioner</div>

我希望它成为：

Brand Name<br />
Shampoo & conditioner

基本上，我很少说10个品牌名称，理想情况下我希望代码能够将这些名称与标题相匹配，然后打破这一行。

编辑：添加更多示例

<div class="title">Dark Red product name</div>
<div class="title">Blue product name</div>
<div class="title">Pure Orange product name</div>
<div class="title">Crystal White product name</div>
<div class="title">Green product name</div>

Answer 1

您需要使用类而不是ID来匹配标题，因为页面中不能包含重复的ID：

示例：http://jsfiddle.net/TrueBlueAussie/w6q7a6L4/

$('.title').html(function(){
    return $(this).html().replace('Brand Name','Brand Name<br/>');
});

在这个例子中，它使用jQuery的html()来获取函数。为每个匹配项调用该函数，每次this将是其中一个元素。这将获取html（）字符串（它是元素的innerHTML属性），执行一些字符串匹配并根据您的规则按需要插入<br/>。

对于倍数，一个选项是简单地链接替换：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/w6q7a6L4/1/

$('.title').html(function(){
    return $(this).html().replace('Brand Name','Brand Name<br/>')
        .replace('Another brand', 'Another brand<br/>')
        .replace('Acme', 'Acme<br/>')
        .replace('Brand x', 'Brand x<br/>');
});

如果您想从一系列品牌名称进行数据驱动：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/w6q7a6L4/3/

var brands = ['Brand Name', 'Another brand', 'Acme', 'Brand x'];

$('.title').html(function () {
    var html = $(this).html();
    brands.forEach(function (brand) {
        html = html.replace(brand, brand + '<br/>');
    });
    return html;
});

Jquery在一两个匹配的单词后添加换行符

1 个答案: