Javascript 如何在n个单词后拆分一行文本+；风格分开？

我有一行文字，它是帖子的标题，看起来是这样的：

<h2 class="title">
  <a href="http://example.com">Report 10/2019 The name of the report</a>
</h2>

我希望能够： a） 在年后拆分链接标题的名称； b） 以两种不同的方式分别设置“Report 10/2019”和名称的其余部分的样式（最好在每个部分或至少第一部分中添加一个类）

我使用以下方法成功地拆分了文本：

var breakAt = 17;
var brokenString = $(".title a").html();
brokenString = brokenString.substring(0, breakAt) + "<br>" + brokenString.substring(breakAt);
$(".title a").html(brokenString);

var breakAt=17；
var brokernstring=$（“.title a”）.html（）；
brokenString=brokenString.substring（0，breakAt）+“
”+brokenString.substring（breakAt）；
$（“.title a”）.html（经纪）；

但这会将名称除以字符数，而在X个空格之后（在本例中是在第二个空格之后）分割会更安全—月份的数字将是一个或两个字符。

---

并且不知道如何对标题链接的两部分应用不同的样式。

您可以尝试使用拆分函数和字符串的第二个空格：

$(document).ready(function(){
    var string = $('.title a').text();
    var report_date  = string.split(' ').slice(0, 2).join(' ');
    var report_title  = string.replace(report_date, '').trim();      
});

---

循环遍历所有标题，获取其内容，应用正则表达式，并将从头到尾的子字符串（4位数字）包装成

span

（或其他元素，如果您愿意）

然后将样式应用于

span

（例如，更粗体的字体和

显示：block

），使其余部分从新行开始）

var titles=document.querySelectorAll（'.title a'）；
[…标题].forEach（（标题）=>{
var content=title.textContent；
content=content.replace（/（^.+？\d{4}）/，“$1”）；
title.innerHTML=内容；
})

。标题a{
颜色：#333；
字体大小：400；
}
.标题跨度{
字号：700；
显示：块；
}

---

您需要两件关键的事情：

• RegExp，用于更好、更动态的模式匹配

• span

  标记，因为您想添加类（如果您只是用

  br

  分割两个部分，则无法执行此操作-它们仍然只是文本节点）

因此，RegExp的问题是，我们如何定义断点？嗯，用这个邮戳似乎是明智的。首先我们要抓住它：

let a = $(".title a"),
let part_1 = a.text().match(/^.+\d{2}\/\d{4}/);

然后我们需要从整个字符串中删除刚刚匹配的内容，以获得第二部分。我们还将删除这两部分之间的空白

let part_2 = a.text().replace(part_1[0], '').trim();

最后一件事是将这两个部分放入

a

中的

span

标记中

$('<span>').addClass('part-1').text(part_1[0]).appendTo(a);
$('<span>').addClass('part-2').text(part_2).appendTo(a);

$（''）.addClass（'part-1'）.text（part_1[0]）。附录（a）；
$（''）.addClass（'part-2'）。文本（part_2）。附录（a）；

您可能希望使用正则表达式，因为字符串第一部分的长度可能是动态的。此模式应将字符串分为两部分：一部分包含报表+月/年，另一部分包含报表名称：

/^(.*?\/\d{4})(.*?)$/

请参见此处的概念证明：

const links=document.querySelectorAll（'h2.title a'）；
Array.prototype.forEach.call（links，（link）=>{
常量textRegex=/^（.*？\/\d{4}）（.*？$/gi；
const matches=textRegex.exec（link.textContent）；
const reportYear=匹配[1]。trim（）；
const reportName=匹配[2]。trim（）；
link.innerHTML=`${reportYear}${reportName}`；
});
。标题a span{
显示：块；
}
.年{
颜色：红色；
}
.姓名{
颜色：绿色；
}
如果要根据空格数打断字符串，可以使用
split

以下是一个例子：


var stringToBreak=$（“.title a”）.html（）；
var Brokenar=stringToBreak.split（“”）；
var txtToStyle1=brokenar.slice（0，2.join）（“”）；
var txtToStyle2=brokenar.slice（2.join）（“”）；
$（“.title a”）.empty（）；
$（“.title a”）。追加(
$（“”）.html（txtToStyle1.css（'color'，'red'））
).附加(
$（“”）.html（“”+txtToStyle2）
);
a{
}

这里有一个解决方案

var brokenString = $(".title a").html();
var stringArray = brokenString.split(" ");
var firstPart = stringArray[0] + " " + stringArray[1];

// firsPart delete from array

stringArray.shift();
stringArray.shift();

// now assign in html

$(".title a").html(firstPart + ' <br>' + stringArray.join(' ')); 

var brokernstring=$（“.title a”）.html（）；
var stringArray=brokenString.split（“”）；
var firstPart=stringArray[0]+“”+stringArray[1]；
//从数组中删除第一部分
stringArray.shift（）；
stringArray.shift（）；
//现在在html中分配
$（“.title a”）.html（第一部分+”
“+stringArray.join（“”））；

const-anchorText=document.getElementsByTagName（'a'）[0].innerText；
const splitBy='2019'；
const splittedText=anchorText.split（splitBy）；
const firstElement=“”+splittedText[0]+splitBy+”；
const secondElement=“”+拆分文本[1]+”；
document.getElementsByTagName（'a'）[0]。innerHTML=firstElement+secondElement
。首先{
颜色：红色；
}
.第二{
颜色：绿色；
}

字符串是静态的还是有固定的单词？与其寻找空格，我宁愿用一个小正则表达式匹配
Report mm/yyyy
的模式，然后将其包装成一个span。另一种方法是：在哪里生成
html
（服务器端模板）？可以编辑这个吗？所以你可以扩展它并设置额外的CSS类。Chris-不回应人们花时间为你写的答案是很糟糕的。至少，请投一些赞成票并发表评论，如果有任何问题可以解决，请接受。请记住，我们这样做是为了帮助你。我很抱歉-在这里还没有足够的经验。谢谢我已经设法使它工作如下：这工作得很好。要添加换行符并添加一个类来设置报告编号的样式，我更改了
content=content.replace（/（^.+？\d{4}）/，“$1”）
to
content=content.replace（/（^.+？\d{4}）/，“$1”）不能将块元素插入内联元素。