如何在JavaScript中用div元素替换连字符并包裹文本段

需求说明 #

需要将字符串 stackoverflow-is-the-best-site-in-the-world 中的连字符替换，把每个文本段用带cssx类的div标签包裹，期望输出如下HTML结构：

<div class='cssx'>stackoverflow</div>
<div class='cssx'>is</div>
<div class='cssx'>the</div>
<div class='cssx'>best</div>
<div class='cssx'>site</div>
<div class='cssx'>in</div>
<div class='cssx'>the</div>
<div class='cssx'>world</div>

用户已通过PHP实现该功能，代码如下：

<?php
$str ="stackoverflow-is-the-best-site-in-the-world";
echo $output = str_replace('-', "<div class='cssx'></div>", $str);
?>

当前JS代码的问题 #

你提供的JS代码存在几个关键错误：

• 错误地将replace方法的调用作为字符串拼接，没有实际执行替换逻辑，最终输出的是代码文本而非执行结果
• 变量名错误：使用了未定义的text变量，实际应该用str
• 字符串拼接的语法错误，导致逻辑无法正确执行

正确实现方案 #

这里提供两种可行的实现方式：

方法一：split分割后拼接（直观易懂） #

const str = "stackoverflow-is-the-best-site-in-the-world";
// 按连字符分割成数组，遍历每个元素生成对应div标签，最后用换行符拼接成完整字符串
const output = str.split('-').map(item => `<div class='cssx'>${item}</div>`).join('\n');
console.log(output);

方法二：使用replace全局替换 #

const str = "stackoverflow-is-the-best-site-in-the-world";
// 全局替换连字符为闭合div+新div标签，再给首尾包裹外层div
const output = `<div class='cssx'>${str.replace(/-/g, "</div>\n<div class='cssx'>")}</div>`;
console.log(output);

两种方法都能输出符合需求的HTML结构，可根据习惯选择使用。

内容的提问来源于stack exchange，提问作者Nancy Moore