我正在研究一个预测文本功能，该功能可以分析输入中的文本-如果用户即将触发预测通配符来填充提示文本，并在需要时根据用户的选择进行覆盖。它应该在提示文本下显示可用选项的列表。
不过，现在出了点故障。在后来的版本中，它重复重复的单词，而不是覆盖用户的选择。

function getHint(transcript){
    console.log("GET HINT1");
    let triggerOne = "(?:\\b|')(to)(?:\\b|')";
    const found = transcript.match(triggerOne);
    //let last2 = transcript.slice(-2);
    console.log("found", found);
    //console.log("last2", last2);
    //console.log("found.length", found?.length);
    let hint = "";
    if(found){
    //if(found && (last2 !== "to") ){
      //found?.length > 0
      hint = "<span>jupiter moons</span>";
    }
  
    return transcript + " " +hint;
  }

替代

getHint(transcript) {
    // Define an array of dynamic keywords
    const dynamicKeywords = ['to', 'from', 'a']
    // Create a regular expression pattern to match any of the dynamic keywords
    const dynamicKeywordRegex = new RegExp(
      `\\b(${dynamicKeywords.join('|')})\\b`,
      'gi',
    )
    // Find all matches in the input text
    const matches = transcript.match(dynamicKeywordRegex)
    if (matches) {
      const uniqueMatches = [...new Set(matches)] // Remove duplicate matches
      let hints = {} // Create an object to store hints
      uniqueMatches.forEach((match) => {
        hints[match] = this.state.data[match]
      })
      this.setState({
        suggestions: hints, // Update suggestions with the hint object
        transcriptLength: transcript.length,
        transcript: transcript,
      })
    } else {
      this.setState({
        transcriptLength: 0,
      })
    }
  }
  handleChange(data) {
    let transcript = data.command
    // Get the dynamic keywords from your state data
    const dynamicKeywords = Object.keys(this.state.data)
    // Create a regular expression pattern to match any dynamic keyword
    const dynamicKeywordRegex = new RegExp(
      `\\b(${dynamicKeywords.join('|')})\\b`,
      'gi',
    )
    //   // Find all matches in the input text
    const matches = transcript.match(dynamicKeywordRegex)
    if (matches) {
      // Replace all dynamic keywords with highlighting in the transcript
      let highlightedText = transcript.replace(
        dynamicKeywordRegex,
        (match) =>
          ` ${match} <span className="highlighted-text">${this.state.data[match][0].key}</span>`,
      )
      // Set the highlighted text in the ref
      this.myRef.current.innerHTML = highlightedText
      // Update the hinted text
      this.getHint(transcript)
    } else {
      // No dynamic keywords found, reset the highlighting
      this.myRef.current.innerHTML = transcript
      // Update the hinted text
      this.getHint(transcript)
    }
    // Remove duplicates within the ref
    const currentText = this.myRef.current.textContent
    const newText = this.removeDuplicateWordsAcrossSegments(currentText)
    this.myRef.current.textContent = newText
    this.myRef.current.textContent = currentText
  }

阶段1
https://jsfiddle.net/9kxdnpL6/7/

var to = [
            {
              "key": "home",
              "details": "20 Glenbrook Dr, Hillsborough CA 92591"
            },
            {
              "key": "work",
              "details": "400 S El Camino Real San Mateo, CA 92591"
            }
          ];
          
          var from = [
            {
              "key": "Wimpole Pharmacy",
              "details": "pharmacies"
            },
            {
              "key": "JP Pharmacy",
              "details": "pharmacies"
            },
            {
              "key": "Morrisons Pharmacy",
              "details": "pharmacies"
            }
          ]
        
        function submitLoginForm(event){
            event.preventDefault();
            console.log(event.target['command'].value);
            var transcript = event.target['command'].value;
          var s = document.getElementById("textHolder");
          s.innerHTML = getHint(transcript);
            
        }      
        
        
      
      function getHint(transcript){
        console.log("GET HINT1");
        let triggerOne = "(?:\\b|')(to)(?:\\b|')";
        const found = transcript.match(triggerOne);
        //let last2 = transcript.slice(-2);
        console.log("found", found);
        //console.log("last2", last2);
        //console.log("found.length", found?.length);
        let hint = "";
        if(found){
        //if(found && (last2 !== "to") ){
          //found?.length > 0
          hint = "<span>jupiter moons</span>";
        }
      
        return transcript + " " +hint;
      }

<form onsubmit="submitLoginForm(event)">
        <input type="text" name="command">
        <input type="submit" value="submit">
    </form>
    <div id="textHolder"></div>

阶段2 -它找到提示，但复制单词，并且不覆盖用户的选择。https://codesandbox.io/s/compassionate-elgamal-4h4f2f?file=/src/_globals/PredictiveText/PredictiveText.js:4402-4622