如何使用 JavaScript 通过 class 名称获取元素，然后将逗号拆分为新行？

Question

假设我有这个 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' class 中的逗号和 space 替换为换行符？所以不要看起来像这样：

John Doe，医学博士

Jane Doe，医学博士

Jane Doe Smith，医学博士

输出将是：

李四
MD

李四
MD

简·多·史密斯
MD

更新注意：上面简单示例中的名称和 MD 不应硬编码。对不起，我最初没有提到。

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

Answer 1

使用 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;

Answer 2

// find elements by className and do some operation on each of them
document.querySelectorAll('.blog-post-title').forEach(node => {
  // take content of the node
  const content = node.innerText;

  // split it by ,
  const splitContent = content.split(',');

  // create name element
  const nameEl = document.createElement("div");
  nameEl.innerText = splitContent[0];

  // create position element
  const positionEl = document.createElement("div");
  positionEl.innerText = splitContent[1];
  positionEl.style = "color: red"; // add some styling

  // clear existing node
  node.innerHTML = '';
  // append created elements to existing node
  node.appendChild(nameEl);
  node.appendChild(positionEl);
})

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

Answer 3

您将遍历标题中的链接。在逗号处拆分文本，然后再次将它们放在一起，但将第二个元素包裹在一个跨度中。然后你可以使用 css 来设置跨度的样式。

$('h3 a').each(function(){
   let txt = $(this).text().split(',');
   $(this).html(txt[0] + '<span class="position">'+ txt[1] + '</span>');
});

.position{display:block;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>

Answer 4

这会查询所有 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>

Answer 5

下面是我拆分线条的方式。

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]);
}

Answer 6

一个简单的 "replace" 应该可以完成这项工作。

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

https://jsfiddle.net/gnyf76r0/1/

如何使用 JavaScript 通过 class 名称获取元素，然后将逗号拆分为新行？

How to use JavaScript to get element by class name and then split commas onto new lines?

javascript

jquery

split

getelementsbyclassname