时间戳

首页 > 解决方案 > 如何使用 JavaScript 按类名获取元素，然后将逗号拆分为新行？

javascript - 如何使用 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”类中的逗号和空格？所以不要看起来像这样：

John Doe, MD

Jane Doe, MD

Jane Doe Smith, MD

输出将是：

John Doe
MD

Jane Doe
MD

Jane Doe Smith
MD

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

最后，如果我想为拆分文本添加样式，以便上面的“MD”行以不同的颜色显示，我想知道我是否可以使用相同的函数并只使用<span>或<div>标记来包装拆分文本而不是只是一个换行符。非常感谢任何帮助，因为我无权更改原始文本。

标签： javascriptjquerysplitgetelementsbyclassname

解决方案

这会查询所有blog-post-title-link类，将其 HTML 中的逗号替换为以下文本，并用 包裹div：

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

要获得不同的颜色，您可以a div这样设计：

a div {
  color: red;
}


document.querySelectorAll('.blog-post-title-link').forEach(function(obj) {
  obj.innerHTML = obj.innerHTML.replace(/,(.+)/, (_, s) => `<div>${s}</div>`);
});
a div {
  color: red;
}
<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>

这是 jQuery 等价物：

$('.blog-post-title-link').html((_, html) => 
  html.replace(/,(.+)/, (_, s) => `<div>${s}</div>`)
);


$('.blog-post-title-link').html((_, html) => 
  html.replace(/,(.+)/, (_, s) => `<div>${s}</div>`)
);
.blog-post-title div {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

推荐阅读