Javascript-使用onClick函数突出显示字符串中的特定文本

假设我们有一个HTML段落，其中包含一些文本：

<p>Hello. This is a random paragraph with some not so random text inside of this paragraph</p>

我需要的是一个函数，它将高亮显示（更改样式）数组中包含的段落内的文本。请注意，单词段落在标记内有两次，但我只需要突出显示我单击的特定段落。我还需要做一些计算后，点击式增量计数器

---

Environment:React.js不可能使用jquery

因为您使用的是React，所以可以使用

String.prototype.split（）

将整个文本拆分为单个单词数组，然后使用条件呈现将其呈现为高亮显示或非高亮显示：

class MyComponent extends React.Component {
  render() {
    const arrayOfStrings = stringContainingParagraph.split(' ');

    return (
      <div>
        {arrayOfStrings.map((elem) => (
          ( highlightThisWords.indexOf(elem) !== -1 ) ?
          <mark>{elem}</mark> :
          <span>{elem}</span>
        ))}
      </div>
    );
  }
}

类MyComponent扩展了React.Component{ render（）{ const arrayOfStrings=stringcontainingparagration.split（“”）； 返回( {arrayOfStrings.map（（elem）=>( （highlightThisWords.indexOf（elem）！=-1）？ {elem}： {elem} ))} ); } }

---

然后，您可以根据需要自定义此代码（增加一个计数器，或使用

onClick

s来获得所需的功能）。

您可以创建一个自定义组件，并将该自定义组件用于带“”的拆分字，但是我尝试创建了一个不太干净的，但演示了它的工作原理。 要在此帖子上显示代码，请执行以下操作：

class Hello extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }
  split(str) {
    return str.split(" ");
  }
  make(str, i) {
    return <span key={i} style={{marginLeft:3}} onClick={this.handleClick}>{str}</span>;
  }
  handleClick(e) {
    console.log(this.props.highlights, e.target.innerText);
    if (this.props.highlights.indexOf(e.target.innerText) !== -1) {
      e.target.style.background = "red";
    }
  }
  render() {
    const parts = this.split(this.props.name);
    return <div>{parts.map((d, i) => {
        return this.make(d, i);
    })}</div>;
  }
}

ReactDOM.render(
  <Hello highlights={['random', 'paragraph', 'inside']} name="This is a random paragraph with some not so random text inside of this paragraph" />,
  document.getElementById('container')
);

类Hello扩展了React.Component{
构造函数（）{
超级（）；
this.handleClick=this.handleClick.bind（this）；
}
拆分（str）{
返回str.split（“”）；
}
make（str，i）{
返回{str}；
}
handleClick（e）{
log（this.props.highlights，e.target.innerText）；
if（this.props.highlights.indexOf（e.target.innerText）！=-1）{
e、 target.style.background=“红色”；
}
}
render（）{
const parts=this.split（this.props.name）；
返回{parts.map（（d，i）=>{
归还这个。制作（d，i）；
})};
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

const highlightThisWords=[“随机”、“段落”、“内部”]；
const pNode=document.querySelector（'p'）；
//将pNode转换为高光感知DOM
pNode.innerHTML=pNode.textContent.split（“”）.map（word=>{
返回HighlightThisWord。包括（word）`${word}`:word；
}).加入（“”）；
const potentialHighlights=pNode.queryselectoral（'span'）；
潜在亮点。forEach（highlightableWord=>{
highlightableWord.addEventListener（'click'，函数（e）{
//把其余的都拆开
pNode.querySelectorAll（'.highlighted'）.forEach（highlighted=>{
高亮显示的.classList.remove（'highlighted'）
});
//突出显示单击的单词
highlightableWord.classList.add（'highlighted'）；
});
});
。突出显示{
颜色：红色；
}
你好。这是一个随机段落，段落内有一些不太随机的文本

数组仅在单击文本时填充？请注意，单词段落在标记中有两次，但我只需要突出显示我单击的未获取partNo的特定段落。它的预制数组。我需要突出显示段落内部的文本，该文本对应于数组中的一个字符串。在这种情况下，两个段落都需要突出显示，不是吗？当我单击第一个段落时，只有第一个段落突出显示。第二个也一样。如果我没有点击第一个，而是点击了第二个，那么只有第二个会突出显示。或者，当我点击这两个按钮时，两个按钮都被高亮显示。我不得不对React.js进行大量修改，但这个想法效果最好

class Hello extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }
  split(str) {
    return str.split(" ");
  }
  make(str, i) {
    return <span key={i} style={{marginLeft:3}} onClick={this.handleClick}>{str}</span>;
  }
  handleClick(e) {
    console.log(this.props.highlights, e.target.innerText);
    if (this.props.highlights.indexOf(e.target.innerText) !== -1) {
      e.target.style.background = "red";
    }
  }
  render() {
    const parts = this.split(this.props.name);
    return <div>{parts.map((d, i) => {
        return this.make(d, i);
    })}</div>;
  }
}

ReactDOM.render(
  <Hello highlights={['random', 'paragraph', 'inside']} name="This is a random paragraph with some not so random text inside of this paragraph" />,
  document.getElementById('container')
);