Javascript 如何在文本编辑器中换行（在span中）单词

我有一个javascript变量，如下所示：

var text = "A <mark id='1'>businessman</mark> should be able to <mark id='1'>manage</mark> his business matters";

var text=“一个商人应该能够管理他的商业事务”；

我想用不同的id将每个单词包装在span元素中，但将已包装的单词保留在

标记中。像这样：

text = "<span id='1'>A </span><mark id='1'>businessman</mark><span id='2'>should</span><span id='3'>be </span><span id='4'>able </span><span id='5'>to </span><mark id='2'>manage</mark><span id='6'>his </span><span id='7'>business </span><span id='8'>matters</span>";

text=“一个商人应该能够管理他的商业事务”；

我希望所有这些都在javascript或jquery中实现，但无法实现。如果你们能帮助我，那就太好了

---

谢谢。

以下快速脏方法从

元素中删除空格，这样整个字符串就可以在空格上拆分，允许根据需要包装单个单词，然后将其重新连接在一起，最后还原并重新编号

元素：

var text=“一个商人应该能够管理他的商业事务”；
var指数=1；
var-markIndex=1；
var result=text.replace（//g'，）
.拆分（“”）
.地图（功能（五）{
返回v.slice（0,6）=''v:''v+''
})
.加入（“”）
.replace（//g，function（）{return”“}）；
控制台日志（结果）

以下快速脏方法从

元素中删除空格，以便整个字符串可以在空格上拆分，允许根据需要包装单个单词，然后将其重新连接在一起，最后还原并重新编号

元素：

var text=“一个商人应该能够管理他的商业事务”；
var指数=1；
var-markIndex=1；
var result=text.replace（//g'，）
.拆分（“”）
.地图（功能（五）{
返回v.slice（0,6）=''v:''v+''
})
.加入（“”）
.replace（//g，function（）{return”“}）；
控制台日志（结果）试试这个


函数removeMptyString（k）{
返回k！=''；
}
函数getWordsArray（div）{
var rWordBoundary=//[\s\n\t]+//；//按制表符、换行符、空格拆分
var输出=[]；
对于（var i=0；i
span.txtSpan{
填充：2px；
显示：内联块；
文字装饰：下划线；
}

一个商人应该能够管理他的商业事务
试试这个


函数removeMptyString（k）{
返回k！=''；
}
函数getWordsArray（div）{
var rWordBoundary=//[\s\n\t]+//；//按制表符、换行符、空格拆分
var输出=[]；
对于（var i=0；i
span.txtSpan{
填充：2px；
显示：内联块；
文字装饰：下划线；
}

一个商人应该能够管理他的商业事务
我采用了一种更简单的方法，即使用浏览器的原生DOM来解析和转换

这里的想法是：

创建一个空元素，不要将其添加到文档中
将要转换和包装的文本设置为temp元素的
innerHTML
从temp元素的
childNodes
创建一个数组（在设置
innerHTML
时创建）
如果childNode有一个
nodeValue
，则它是一个未包装在
标记中的文本节点。在这种情况下，创建一个新的跨度图元

如果节点已经包装在元素中，只需返回元素即可
在执行所有这些操作时，请将ID重新映射到数组中的索引。这样，它们是独一无二的
由于您正在设置元素的innerHTML，因此DOM实际上会修复任何错误，从而获得完美的HTML:）


var text=“一个商人应该能够管理他的商业事务”；
const tempElement=document.createElement（'div'）；
tempElement.innerHTML=文本；
让final=Array.from（tempElement.childNodes）.map（（节点，索引）=>{
if（node.nodeValue）{//如果节点是文本节点
让newSpanElement=document.createElement（'span'）；
newSpanElement.id=index；//分配一个id
newSpanElement.innerText=node.nodeValue；
返回消息面板；
}
//否则它在另一个元素中
node.id=index；//重新分配id
返回节点；
}).map（node=>node.outerHTML）.join（“”）；
控制台日志（最终）我采用了一种更简单的方法，即使用浏览器的本地DOM来解析和转换

这里的想法是：

创建一个空元素，不要将其添加到文档中
将要转换和包装的文本设置为临时文本的
innerHTML