javascript，分割字符串，并显示一个单词的大胆

Question

我有一个字符串，我想要显示它的粗体字。

this.splitSentence(exercise.sentence,boldWordIndex) 

所以我决定把字符串分成3部分;在粗体字，粗体字之前和之后。 所以我定义了如下功能。但我在加入时遇到问题，中间有三个词没有空格。而且我认为应该有更好的方法。

splitedSentence(sentence,index) { 
     var splitedSentece = sentence.split(" "); 
     var slice1=splitedSentece.slice(0,index); 
     var slice2=splitedSentece.slice(index,index+1); 
     var slice3=splitedSentece.slice(index+1,splitedSentece.length); 
     return [slice1.join(" "),slice2.join(" "),slice3.join(" ")]; 
} 

obs！我在一个反应​​应用

Answer 1

写这个，我希望这是你在找>>fiddle：

class Example extends React.Component { 
    constructor(){ 
    super(); 
    this.state = { 
     word: '' 
    } 
    this.change = this.change.bind(this) ; 
    } 
    change(e){ 
    this.setState({ [e.target.name]: e.target.value}); 
    } 
    render(){ 
    const index = this.props.sentences.split(' ').indexOf(this.state.word); 
    const sentences = this.props.sentences.split(' ').map((item, key) => { 
     // index may come from server 
     return <Word classN={index === key ? 'foo' : ''} key={key} text={item} /> 
    }); 

    return <div> 
     <input name='word' type='text' onChange={this.change}/> <br/> 
      {sentences} 
    </div> 
    } 
} 

class Word extends React.Component { 
    render(){ 
    return <span className={this.props.classN}>{` ${this.props.text} `}</span> 
    } 
} 

React.render(<Example sentences={'Hello World from ReactJS'}/>, document.getElementById('container'));