Javascript 如何将html元素添加到字符串并显示它们？

我有以下字符串，

今天是美好的一天

和带有

开始

的子字符串：

3

和

结束

：

20

要形成的属性索引

ay是美好的

。注意子字符串中的空格

我试图实现的是动态地呈现字符串，子字符串以粗体显示，如下所示：

今天是美好的一天

我想这会有点像我尝试过的，通过操纵字符串并在其中添加

：

今天是美好的一天

，它只会返回一个显示

的字符串

---

我还尝试返回一个html元素，在标记之间包含字符串：

Tod{bold SEQUENCE}day

，这使得合并一个单独的单词和管理空白变得太复杂了。

您可以这样做。我已经用javascript完成了这项工作

const startIndex=3；
常数endIndex=20；
const myString='今天是美好的一天'；
常量mySubString=myString.substring（3,20）；
常量startString=myString.substring（0，startIndex）；
const endString=myString.substring（endIndex，myString.length）
log（startString+“”+mySubString+”“+endString）您可以这样做。我已经用javascript完成了这项工作


const startIndex=3；
常数endIndex=20；
const myString='今天是美好的一天'；
常量mySubString=myString.substring（3,20）；
常量startString=myString.substring（0，startIndex）；
const endString=myString.substring（endIndex，myString.length）
log（startString+“”+mySubString+”“+endString）
您可以创建一个
usemo
函数来生成这样的jsx结构：

从“react”导入{useState，usemo}；
导出默认函数App（）{
const[text，setText]=useState（“今天是一个美好的日子”）；
const[[start，end]，setRange]=useState（[3，20]）；
常量段落=使用备注（（）=>(

{text.substring（0，start）}
{text.substring（开始、结束+1）}
{text.substring（end+1）}

)，[文本，开始，结束]；
返回(
{段落}
);
}

选中
您可以创建一个
usemo
函数来生成这样的jsx结构：

从“react”导入{useState，usemo}；
导出默认函数App（）{
const[text，setText]=useState（“今天是一个美好的日子”）；
const[[start，end]，setRange]=useState（[3，20]）；
常量段落=使用备注（（）=>(

{text.substring（0，start）}
{text.substring（开始、结束+1）}
{text.substring（end+1）}

)，[文本，开始，结束]；
返回(
{段落}
);
}

使用和检查


const str=“今天是美好的一天”；
函数makestrong动态（str、start、end）{
常数res=str
.拆分（“”）
.map（（s，i）=>{
if（i==start）返回`${s}`；
else if（i==end）返回`${s}`；
否则返回s；
})
.加入（“”）；
返回res；
}
const innerHTML=makestrong动态（str，3，20）；
常量元素=document.querySelector（“.str附件”）；
element.innerHTML=innerHTML
使用和


const str=“今天是美好的一天”；
函数makestrong动态（str、start、end）{
常数res=str
.拆分（“”）
.map（（s，i）=>{
if（i==start）返回`${s}`；
else if（i==end）返回`${s}`；
否则返回s；
})
.加入（“”）；
返回res；
}
const innerHTML=makestrong动态（str，3，20）；
常量元素=document.querySelector（“.str附件”）；
element.innerHTML=innerHTML
我正在寻找一种方法来添加并有条件地执行此操作，因为我有一个“开始”和“结束”子字符串，而不是手动。哦，好吧，让我编辑我的答案。给我一个时间。OP需要强大到endIndex，所以我想它应该是
str.substring（start，end+1）我正在寻找一种方法来添加并有条件地执行此操作，因为我有一个“开始”和“结束”子字符串，而不是手动。哦，好吧，让我编辑我的答案。给我一个时间。OP需要强大到endIndex，所以我想它应该是
str.substring（start，end+1）
OP希望强大到endIndex，所以我想应该是
str.substring（start，end+1）@SAM你说得对，谢谢你指出。刚刚修复了它。OP需要强大到endIndex，所以我想它应该是
str.substring（start，end+1）@SAM你说得对，谢谢你指出。刚刚修复。如何在React中渲染此内容？如果没有document.queryselector，您可以使用
useRef
如何在React中呈现此内容？如果没有document.queryselect，您可以使用
useRef