Javascript 如何在特定索引的div内的文本子字符串周围添加div或span？

我有一个包含字符串的div。例如：

<div id='original'>A red chair that is on the left of another chair next to the door</div>

现在，我想在“原始”div中的上述两个短语周围添加一个span或div，以便突出显示这些短语

预期结果：

<div id='original'>A red chair that is on the left of another <div style="display:inline; color:#ed3833; cursor:pointer;">chair</div> next to <div style="display:inline; color:#ed3833; cursor:pointer;">the door</div></div>

门旁边另一把椅子左边的红色椅子

对于一个短语，我可以使用开始和结束索引在其周围插入div，但是对于后续的插入，它显然失败了，因为索引现在已经更改，因为在第一个短语周围添加了div。你能帮我做这个吗

我不知道这是否有帮助，但对于在第一个短语周围添加div，我使用以下逻辑：

str = $('#original').text()
var preStr = str.substring(0, startIdx);
var newStr = `<div style="display:inline; color:#ed3833; cursor:pointer;">${phrase}</div>`
var postStr = str.substring(endIdx, str.length);
result = preStr+newStr+postStr;

str=$（“#原件”）.text（）
var preStr=str.substring（0，startIdx）；
var newStr=`${phrase}`
var postStr=str.substring（endIdx，str.length）；
结果=preStr+newStr+postStr；

---

如果您需要更清晰的信息，请告诉我，我会尽力更好地解释。

使用db中的索引对您来说重要吗？ 这个怎么样

result=$（“#原始”）
.text（）
.split（短语）
.join（`${phrase}`）；

使用db中的索引对您来说重要吗？ 这个怎么样

result=$（“#原始”）
.text（）
.split（短语）
.join（`${phrase}`）；

更好的方法是尽可能减少包装元素，所以我建议使用css作为样式

此外，我们还可以使用本机javascript正则表达式，例如，我构建了一个小包装器函数作为帮助器来包装结果，而且我使用的是纯JS，而不是需要jQuery

var el=document.getElementById（'original'）//目标元素
var ht=el.innerHTML//内部html
//辅助包装函数
函数包装器（匹配）{
返回“”+匹配+“”
}
ht=ht.更换（/chair/g，包装纸）；
ht=ht.更换（/门/g，包装）；
el.innerHTML=ht//将结果写入div
console.log（ht）

.wrap{
显示：内联；
颜色：#ed3833；
光标：指针
}

---

门旁边另一把椅子左边的红色椅子

更好的做法是尽可能减少包装元素，因此我建议使用css作为样式

此外，我们还可以使用本机javascript正则表达式，例如，我构建了一个小包装器函数作为帮助器来包装结果，而且我使用的是纯JS，而不是需要jQuery

var el=document.getElementById（'original'）//目标元素
var ht=el.innerHTML//内部html
//辅助包装函数
函数包装器（匹配）{
返回“”+匹配+“”
}
ht=ht.更换（/chair/g，包装纸）；
ht=ht.更换（/门/g，包装）；
el.innerHTML=ht//将结果写入div
console.log（ht）

.wrap{
显示：内联；
颜色：#ed3833；
光标：指针
}

---

门旁边另一把椅子左边的一把红色椅子

我把它玩了一会儿，也许你会发现这种方法很有用：我将字符串拆分为单词，然后计算单词长度，以获得替换的当前位置。然后将操纵放在单个元素上，这样全局顺序/位置就不会改变。这只是一个想法，也许你可以在你的项目中使用它

    let input = 'A red chair that is on the left of another chair next to the door';
let phrases ={
    'chair' : {start: 43, end: 48},
    'the door': {start: 58, end: 66}
};
let words = input.split(' ');
let position = 0;
for (word of words) {
    position += word.length + 1 // add one extra for blank after a word;
    if (phrases.chair.start === position || phrases["the door"].start === position + 1) {
        word = "<div class='start highlight'>" + word;
    }
    if (phrases.chair.end === position || phrases["the door"].end === position) {
        word = word + "</div>";
    }
    console.log(word+" : " + position);
}

let input='门旁边另一把椅子左边的红色椅子'；
让短语={
“主席”：{开始：43，结束：48}，
“门”：{开始：58，结束：66}
};
让words=input.split（“”）；
设位置=0；
为了（逐字逐句）{
position+=word.length+1//在单词后面加一个空格；
如果（短语.chair.start==位置| |短语[“门]）。start==位置+1）{
word=”“+单词；
}
如果（短语.chair.end==position | |短语[“门”].end==position）{
单词=单词+“”；
}
控制台日志（word+“：”+位置）；
}

我对它进行了一些研究，也许您会发现这种方法很有用：我将字符串拆分为单词，并计算单词长度，以获得替换的当前位置。然后将操纵放在单个元素上，这样全局顺序/位置就不会改变。这只是一个想法，也许你可以在你的项目中使用它

    let input = 'A red chair that is on the left of another chair next to the door';
let phrases ={
    'chair' : {start: 43, end: 48},
    'the door': {start: 58, end: 66}
};
let words = input.split(' ');
let position = 0;
for (word of words) {
    position += word.length + 1 // add one extra for blank after a word;
    if (phrases.chair.start === position || phrases["the door"].start === position + 1) {
        word = "<div class='start highlight'>" + word;
    }
    if (phrases.chair.end === position || phrases["the door"].end === position) {
        word = word + "</div>";
    }
    console.log(word+" : " + position);
}

let input='门旁边另一把椅子左边的红色椅子'；
让短语={
“主席”：{开始：43，结束：48}，
“门”：{开始：58，结束：66}
};
让words=input.split（“”）；
设位置=0；
为了（逐字逐句）{
position+=word.length+1//在单词后面加一个空格；
如果（短语.chair.start==位置| |短语[“门]）。start==位置+1）{
word=”“+单词；
}
如果（短语.chair.end==position | |短语[“门”].end==position）{
单词=单词+“”；
}
控制台日志（word+“：”+位置）；
}

您可以执行以下操作：

str=$（'#original'）.text（）；
str=str.更换（/（椅子（？=旁边）|门）/g，'$&'）；
$（“#结果”）.html（str）

门旁边另一把椅子左边的一把红色椅子

您可以执行以下操作：

str=$（'#original'）.text（）；
str=str.更换（/（椅子（？=旁边）|门）/g，'$&'）；
$（“#结果”）.html（str）

门旁边另一把椅子左边的一把红色椅子

您可以为索引形成数组，如下所示：

var str=$（'#original'）.html（）；
var startInd=[43,58]；
var lastInd=[48,66]；
变量计数=起始长度；
for（设i=0；i