如何使用JavaScript按类名获取元素，然后将逗号拆分到新行上？

假设我有这个HTML输出：

<h3 class="blog-post-title">
<a href="https://www.link1.com" class="blog-post-title-link">John Doe, MD</a>
</h3>

<h3 class="blog-post-title">
<a href="https://www.link2.com" class="blog-post-title-link">Jane Doe, MD</a>
</h3>

<h3 class="blog-post-title">
<a href="https://www.link3.com" class="blog-post-title-link">Jane Doe Smith, MD</a>
</h3>

如何使用一个简单的脚本将每个“blog post title link”类中的逗号和空格替换为换行符？所以不要像这样：

医学博士约翰·多伊

马里兰州简·多伊

医学博士简·多伊·史密斯

输出将是：

约翰·多伊医学博士 简·多伊
MD

简·多伊·史密斯
MD

更新说明：上述简单示例中的名称和MD不应硬编码。很抱歉，我最初没有提到这一点。

---

最后，如果我想为拆分文本添加一种样式，以便上面的“MD”行以不同的颜色显示，我想知道是否可以使用相同的函数，只使用

或

标记来包装拆分文本，而不只是换行。非常感谢您提供的任何帮助，因为我无法更改原始文本。

使用string.split作为分隔符，然后循环数组输出新行上的每个字符串

let string = document.getElementById("myID").innerHTML;

let array = string.split(',');

let outStr = '';

array.foreach( (str) => {
    outStr += str + '\n';
});

document.getElementById("myID").innerHTML = outStr;

//按类名查找元素，并对每个元素执行一些操作
document.querySelectorAll（'.blog post title'）.forEach（node=>{
//获取节点的内容
const content=node.innerText；
//把它分开，
const splitContent=content.split（'，'）；
//创建名称元素
const namele=document.createElement（“div”）；
nameEl.innerText=splitContent[0]；
//创建位置元素
const positionEl=document.createElement（“div”）；
positionEl.innerText=拆分内容[1]；
positionEl.style=“color:red”；//添加一些样式
//清除现有节点
node.innerHTML=''；
//将创建的元素附加到现有节点
node.appendChild（nameEl）；
子节点（位置EL）；
})

---

您将迭代标题中的链接。以逗号分隔文本，然后再次将它们放在一起，但将第二个元素包装在一个范围内。然后可以使用css来设置跨度的样式

$（'h3a'）。每个（函数（）{
让txt=$（this.text（）.split（'，'）；
$（this.html（txt[0]+''+txt[1]+''）；
});
位置{显示：块；颜色：红色；}
这将查询所有
博客文章标题链接
类，将它们的HTML中的逗号替换为以下文本，包装在
div
中：

document.querySelectorAll('.blog-post-title-link').forEach(function(obj) {
  obj.innerHTML = obj.innerHTML.replace(/,(.+)/, (_, s) => `<div>${s}</div>`);
});


document.querySelectorAll（'.blog post title link'）.forEach（函数（obj）{
obj.innerHTML=obj.innerHTML.replace（/，（.+）/，（z，s）=>`${s}`）；
});
a div{
颜色：红色；
}
下面是我如何分割这些行的

var x = document.getElementsByClassName("blog-post-title-link");

let length = x.length;

for (var i = 0; i < length; i++){
    let text = x[i].textContent;
    text = text.replace(", ", "<br>");
    x[i].innerHTML = text;
    console.log(x[i]);
}

var x=document.getElementsByClassName（“博客文章标题链接”）；
设长度=x.length；
对于（变量i=0；i”）；
x[i].innerHTML=text；
console.log（x[i]）；
}
一个简单的“替换”应该可以使这项工作正常

var htmlText = document.getElementById("testing").innerHTML;
var newText = htmlText.split(", MD").join("\n<div class='newStyle'>MD</div>")
document.getElementById("testing").innerHTML = newText;

var htmlText=document.getElementById（“测试”）.innerHTML；
var newText=htmlText.split（“，MD”）.join（“\nMD”）
document.getElementById（“测试”）.innerHTML=newText；

选择元素的方法比选择
getElementById
的方法多得多。考虑到OP的HTML中没有ID，这可能不是最好的答案。我会将两者放在一个单独的标记中，因此它是块级别的。然后，调整行高。你在那里硬编码了MD，假设它总是MD？@NawedKhan，这就是示例所示。如果他们想要别的东西，他们应该明确地说“MD”可以是任何东西。雅格尼。如果是这样的话，为什么不把无名尸也硬编码呢？根据你的逻辑，如果名字可能是玛丽·史密斯，那么他们应该明确提到。lol@NawedKhan，我的代码不需要指定“John Doe”。补充这一点是不必要的。由于OP明确表示他们想要更改“MD”部分，这是必要的。这不仅仅是将“MD”放在
span
标记中。我必须假设浏览器正在帮助您，假定
span
已关闭，以便可以关闭
a
标记。span标记已关闭，并且位于a标记内。唯一进入span的“不仅仅是MD”是一个空格。可以修剪。您的代码表示
txt[1]
==“MD”，您将其包含在
span
标记中。您没有拆分
a
标记。不，它没有。您缺少包含“a”的选择器。这意味着它只是在a标记中选择“文本”（而不是html）。这肯定是答案，尽管我想知道我是否可以将“博客文章标题链接”类作为目标，而不是“H3 a”类。谢谢Rick，非常有用。
var htmlText = document.getElementById("testing").innerHTML;
var newText = htmlText.split(", MD").join("\n<div class='newStyle'>MD</div>")
document.getElementById("testing").innerHTML = newText;