Question

所以，让我们说我们有一个带有一些文字的HTML段落：

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

我们有一个字符串数组：

const highlightThisWords = ['random', 'paragraph', 'inside']

我需要的功能是突出显示（更改样式）包含在数组内部的段落内的文本。注意段落中的单词是两次，但我只需要突出显示我点击的特定单词。此外，我需要在点击之后进行一些计算，例如递增计数器。

环境：没有jquery的React.js

Answer 1

您可以创建自定义组件，并将该自定义组件用于＆＃34; ＆＃34;，但我尝试创建一个非常干净的jsfiddle，但展示了它是如何工作的演示。要在此帖子上显示代码：

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')
);

Answer 2

＆＃13;

const highlightThisWords = ['random', 'paragraph', 'inside'];
const pNode = document.querySelector('p');

// turn pNode into a highlight-aware DOM
pNode.innerHTML = pNode.textContent.split(' ').map(word => {
  return highlightThisWords.includes(word) ? `<span>${word}</span>` : word;
}).join(' ');

const potentialHighlights = pNode.querySelectorAll('span');
potentialHighlights.forEach(highlightableWord => {
  highlightableWord.addEventListener('click', function(e) {
    // dehighlight all the rest
    pNode.querySelectorAll('.highlighted').forEach(highlighted => {
      highlighted.classList.remove('highlighted')
    });
    // highlight the clicked word
    highlightableWord.classList.add('highlighted');
  });
});

＆＃13;

.highlighted {
  color: red;
}

＆＃13;

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

＆＃13;

您可以在上面找到vanilla js中的示例代码段，为您的问题实现最小化解决方案。除非您将该单词包装在自己的html标记中，否则没有人性化的方法来确定段落中单击了哪个确切的单词。到目前为止，提出的答案是将每个单词包装成标签。虽然这很有效，但是如果你有很长的段落（假设你的内存中有数千个DOM节点仅用于段落元素），它就不会表现得很好。我建议只包装＆＃34;可能突出显示＆＃34;标签中的单词。

Answer 3

由于您使用的是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>
    );
  }
}

然后，您可以根据需要自定义此代码（递增计数器，或使用onClick来获取所需的功能。）

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

3 个答案: