Javascript 一次用span替换一组单词的其余部分

在下面的示例中，首先我成功地将“我自己的”替换为它自己的span

“我自己的”

。接下来，我想用一个简单的span来替换其余的单词（即“This”、“is”和“example”）。为此，我使用函数fReplace，以便根据后面的@Abhilash注释有条件地执行它，但它失败了。我应用的第二个和第三个解决方案基于一个简单的循环解决方案，但它们也失败了。谁能帮帮我吗。最后一行只是展示结果

<div id='MyOwnExample'>This is my own example</div>
<div id='AA'></div>

<script>
// 1st part: It works
    v1 = document.getElementById('MyOwnExample').innerHTML;
    const regex = new RegExp('my own', 'gi')
    v1 = v1.replace(regex,`<span id = 'sMyOwn'>my own</span>`)
    document.getElementById('MyOwnExample').innerHTML = v1;

// 2nd part: First solution that fails
    function fReplace(word, index) {
        const regex = new RegExp(word, 'gi')
        if (span.className != 'sMyOwn') {
            v1 = v1.replace(regex,`<span>${word}</span> `)
        }
    }
    v1.forEach(fReplace);
    document.getElementById('MyOwnExample').innerHTML = v1;

// 2nd part: Second solution that fails too 
const regex2 = new RegExp(word, 'gi')
for (word of v1) {
    if (span.className != 'sMyOwn') {
        v1 = v1.replace(regex2,`<span>${word}</span> `)
    }
}
document.getElementById('MyOwnExample').innerHTML = v1;

// 2nd part: Third solution that fails too 
for (word of v1) {
    if (typeof(span) == 'undefined') {
        v1 = v1.replace('${word} ', `<span>${word}</span> `)
    }
}
document.getElementById('MyOwnExample').innerHTML = v1;


// 4th part: Results
    document.getElementById('AA').innerText = document.getElementById('MyOwnExample').innerHTML;

</script>

这是我自己的例子
//第一部分：它有效
v1=document.getElementById（'MyOwnExample'）.innerHTML；
const regex=new RegExp（'my-own'，'gi'）
v1=v1.replace（regex，`myown`）
document.getElementById（'MyOwnExample'）。innerHTML=v1；
//第二部分：第一个失败的解决方案
功能位置（单词、索引）{
const regex=new RegExp（单词'gi'）
if（span.className！=“sMyOwn”）{
v1=v1.replace（regex，`${word}`）
}
}
v1.forEach（弗雷莱斯）；
document.getElementById（'MyOwnExample'）。innerHTML=v1；
//第二部分：第二个同样失败的解决方案
const regex2=新的RegExp（单词'gi'）
for（v1的单词）{
if（span.className！=“sMyOwn”）{
v1=v1.replace（regex2，`${word}`）
}
}
document.getElementById（'MyOwnExample'）。innerHTML=v1；
//第二部分：也失败的第三个解决方案
for（v1的单词）{
if（类型（范围）=“未定义”）{
v1=v1.替换（'${word}'，'${word}`）
}
}
document.getElementById（'MyOwnExample'）。innerHTML=v1；
//第四部分：结果
document.getElementById（'AA'）.innerText=document.getElementById（'MyOwnExample'）.innerHTML；

以下是工作示例：

const v1=document.getElementById（'MyOwnExample'）.innerText；
常数arr=v1.split（“”）；
for（设i=0；i
#MyOwne示例span{
背景色：#dedede；
显示：内联块；
保证金：2倍；
}
这是我自己的例子
Aregex保留一组单词有助于安全地拆分句子

const text=“这是我自己的例子”；
const yourHTML=text.split（/（|我自己的）/g）
.filter（v=>v.trim（））
.map（v=>“”+v+“”）
.join（“”）
console.log（你的HTML）

输出：

这是我自己的例子
查看问题中的代码，您希望看到原始文本的输出，而不是html的输出，只是在需要时在html中取消最后一行的注释


这是我自己的例子
/**
首先，根据您的需要，用一个空格将特殊短语包装起来
现在取出特殊短语并将剩余文本拆分为数组，同时使用“\u1”作为特殊短语占位符，以便以后替换。
根据需要将每个单词替换为span
将它们放回原处，同时用包装好的特殊短语替换“u”占位符
**/
const transformer=（单词、特殊短语）=>{
常量wrapSpecialPhrase=`${specialPhrase}`；
const stripOffSpecialPhase=（word.split（specialPhrase））.join（“”）.split（“”）；
const formed=stripOffSpecialPhase.map（wd=>wd！='''？'${wd}`:wd）；
返回格式。连接（“”）。替换（“”），包装专用短语；
}
const aaElement=document.getElementById（'AA'）；
const myOWnExampleElement=document.getElementById（'MyOwnExample'）
const phrase=myOWnExampleElement.innerText；
const transformed=transformer（短语“我自己的”）；
aaElement.innerText=已转换；//当您需要纯文本时，可以使用此选项
/*aaElement.innerHTML=已转换；//当您需要html格式时，可以使用此选项*/
如何在“if”（span.className！=“sMyOwn”）行中获得“span”对象，并将“sMyOwn”设置为ID，而不是类。我的想法是替换span不是“sMyOwn”的每个单词。但是它不起作用。
v1
是对元素的
innerHTML
的引用，因此是一个字符串。对字符串调用
forEach
将遍历字符串的每个字节，而不是每个单词。@异教徒猴子我想我理解你，但我应该怎么做？非常感谢你的努力，但你的解决方案并没有保留“我自己的”。如果我们没有像“我自己的”这样的一个特定跨度，而是有很多这样的跨度呢？这就是我想知道的。如果有一种方法可以一次通过强加标准来取代，我明白你的意思了。你是对的，我们需要有条件地这样做。我已经准确地更新了@Abhilash！！！这就是我想知道的，感谢您帮助澄清这一点。当您有很多单词需要组合在一起时，比如“我自己的”，将它们存储在一个对象中，key=text&value=id\u of_元素（比如R中的dict）。光滑。@Abhilash我明白你在说什么了。如果有其他想法，我会等一等，也许我会听从你的建议。无论如何，非常感谢你。