如何使用 JSX 突出显示字符串中的匹配项？

Question

我有一个自定义的自动完成功能，所以当您输入时，它会根据输入值显示一个建议列表。在列表中，我想将与输入值相同的字符加粗。

因此，如果我有一个建议列表：“alligator”、“lima”、“lime”，并且我输入了“li”，那么建议将如下所示：

• alli鳄鱼
• 里妈
• 李我

我的 jsx 文件中有这个简单的 map：

<ul>
  {matches.map(function(match, idx){
    let re = new RegExp(value, 'g');
    let str = match.replace(re, '<b>'+ value +'</b>');
    return <li key={idx}>{str}</li>
  })}
</ul>

其中value 是输入值。它以这种字符串格式显示列表

• alli鳄鱼
• lima
• li我

不确定如何使用 React。我曾想过使用dangerouslyinnerhtml 或类似的东西，但我认为这是不得已而为之的事情。如果可能的话，我想避免这种情况。

这是我的自动完成组件：

class Autocomplete extends Component{

    constructor(props){
        super(props);

        this.state = {
            value: '',
            matches: [],
            showMatches: false

        }

    }

    searchListing(){
        api.call {
           that.setState({
                showMatches: true, 
                matches: a
            });
        })
        }

    }

    handleOnChangeInput(e){

        let value = e.target.value;
        this.setState({ value: value})

        if(value !== ''){
            this.searchListing(e);
        }else{
            // console.log("value", e.target.value);          
            this.setState({
                showMatches: false,
                matches: []
            })
        }
    }

    render(){

        let matches = this.state.matches;
        let value = this.state.value;
        let matchesHtml;

        if(this.state.showMatches){
            matchesHtml = <ul>
                            {matches.map(function(match, idx){
                                let re = new RegExp(value, 'g');
                                let str = match.replace(re, '<b>'+ value +'</b>');
                                return <li key={idx} dangerouslySetInnerHTML={{__html: str}}></li>

                            })}
                        </ul>
        }
        return(
            <div>
               <input placeholder="type a name" onChange={this.handleOnChangeInput}/>

               {matchesHtml}
            </div>
        );
    }
}

Answer 1

编写你自己的高亮代码可能会导致一个兔子洞。在我的回答中，我假设只有简单的文本（字符串中没有 HTML，没有字符集边缘情况）和有效的非转义 RegExp 模式字符串。

---

您可以构建一个新数组，而不是构建一个新字符串，您可以在其中放置 JSX。

A React component can also return an array of elements:

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

背后的逻辑

作为一个简单的概念证明，我们可以使用以下逻辑：

const defaultHighlight = s => <em>{s}</em>;

// Needed if the target includes ambiguous characters that are valid regex operators.
const escapeRegex = v => v.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");

/**
 * Case insensitive highlight which keeps the source casing.
 * @param {string} source text
 * @param {string} target to highlight within the source text
 * @param {Function} callback to define how to highlight the text
 * @returns {Array}
 */
const highlightWord = (source, target, callback) => {
  const res = [];

  if (!source) return res;
  if (!target) return source;
  
  const regex = new RegExp(escapeRegex(target), 'gi');

  let lastOffset = 0;
  
  // Uses replace callback, but not its return value
  source.replace(regex, (val, offset) => {
    // Push both the last part of the string, and the new part with the highlight
    res.push(
      source.substr(lastOffset, offset - lastOffset),
      // Replace the string with JSX or anything.
      (callback || defaultHighlight)(val)
    );
    lastOffset = offset + val.length;
  });
  
  // Push the last non-highlighted string
  res.push(source.substr(lastOffset));
  return res;
};

/**
 * React component that wraps our `highlightWord` util.
 */
const Highlight = ({ source, target, children }) => 
  highlightWord(source, target, children);


const TEXT = 'This is a test.';

const Example = () => (
  <div>
    <div>Nothing: "<Highlight />"</div>
    <div>No target: "<Highlight source={TEXT} />"</div>
    <div>Default 'test': "<Highlight source={TEXT} target="test" />"</div>
    <div>Multiple custom with 't': 
      "<Highlight source={TEXT} target="t">
        {s => <span className="highlight">{s}</span>}
      </Highlight>"
    </div>
    <div>Ambiguous target '.': 
      "<Highlight source={TEXT} target=".">
        {s => <span className="highlight">{s}</span>}
      </Highlight>"
    </div>
  </div>
);


// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

.highlight {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

这里不需要使用dangerouslySetInnerHTML。

这个highlightWord 函数可以使用任何函数来包装匹配的字符串。

highlight(match, value) // default to `s => <em>{s}</em>`
// or
highlight(match, value, s => <span className="highlight">{s}</span>);

我在 Stack Overflow 上做的最少regex string escaping based on another answer。

---

Highlight 组件

如图所示，我们可以创建一个组件，使其“更具反应性”！

/**
 * React component that wraps our `highlightWord` util.
 */
const Highlight = ({ source, target, children }) => 
  highlightWord(source, target, children);

Highlight.propTypes = {
  source: PropTypes.string,
  target: PropTypes.string,
  children: PropTypes.func,
};

Highlight.defaultProps = {
  source: null,
  target: null,
  children: null,
};

export default Highlight;

它使用render prop，因此您必须将渲染更改为：

<ul>
  {matches.map((match, idx) => (
    <li key={idx}>
      <Highlight source={match} target={value}>
        {s => <strong>{s}</strong>}
      </Highlight>
    </li>
  ))}
</ul>

Answer 2

您只需将映射器作为子项附加到您的自动完成组件中。

<CustomAutocomplete>
  <ul>
    {
      matches.map(function(match, idx){
        let re = new RegExp(value, 'g');
        let str = match.replace(re, '<b>'+ value +'</b>');
        return (<li key={idx}>{str}</li>)
      })
    }
  </ul>
</CustomAutocomplete>