如何从javascript中的文本文件中提取行

Question

我正在开发用于ASR（自动语音识别）的Web门户。众所周知，ASR不会给出100％正确的结果。错误结果的主要原因是人的说话行为，噪音，说话风格，语音强度，同音字（购买，拜拜，地点）等。我计划使用门户网站进行后期处理。我定义了textarea来获取可识别的文本。如果用户在文本区域中发现错误的单词，则他将双击文本区域中的错误单词，然后在同一位置选择单词后显示相似的单词发音选项（相似发音单词存储在文本文件中。一行包含相同发音单词）。如果用户选择单词“ sad”，那么在选项中他将得到“ sad，mad，bad”等。我创建了包含以下行的文本文件

sad, mad, bad

hero, zero

site, cite

buy,bye

如果用户选择单词“ site”，那么他将在textarea中获得“ site，cite”，最后用户将选择正确的单词。间接地我正在文本文件中搜索单词，如果在文本文件中找到了单词，则复制整行并显示为textarea中的选项（例如输入文本后google display的搜索选项）

我编写了小代码，但未能完成所有功能。我的文本文件存储在本地。

    <textarea name="text" id="textdata" rows="7" cols="79" wrap="soft" maxlength="4000" style="overflow:auto; resize:none; font-size: 17pt; font-family:"Times New Roman"
     onselect="populateList(this.value)" > </textarea>


    <script>
     function populateList(val)
    {
        // alert("Entered populateList ");
        var textComponent = document.getElementById('textdata');
        var selectedText;
        var startPos = textComponent.selectionStart;
        var endPos = textComponent.selectionEnd;
            selectedText = textComponent.value.substring(startPos, endPos);
        alert("Selected word : "+selectedText);   
        dic(selectedText);
    }
    </script>

    <script>

    $.get("http://localhost/english/master.txt",function(returnedData) {
        $("#element").text(returnedData);
    },"text/plain");

    </script>

    <script>

    var text = $("#element").text();
    var words = text.split(" ");
    var dictionary = new Array();
    for(var i=0; i < words.length; i++) {
        dictionary[i] = words[i];
        alert("dictionary elements are  :"+dictionary[i]);
    }

    </script>


    <script>

    function dic(word) {
        alert("Word passed for searching :"+word);
        // var dictionary = new Array("Java","Python","Swift","HTML","PHP");
        // This line is unnecessary; use the dictionary var already created.
        var flag = 0;
        for(var i = 0; i < dictionary.length; i++) {
            if(dictionary[i] == word) {
                document.getElementById("result").innerHTML = "Element Found";
                flag = 1;
            alert("Element found ");
                break;
            }
            if(i == dictionary.length - 1) {
                document.getElementById("result").innerHTML = "Element Not Found"; 
            alert("Element not found ");
            }
        }
    }

    </script>

我是网站开发的新手。

Answer 1

我已经解决了您的问题，但是我没有使用txt文件，而是使用json（由于小提琴中的CORS问题），但是如果您创建txt文件，它将可以正常工作。文件中的一个提示词一行一行。

function populateList(val)
{
  let textComponent = document.getElementById('textdata');
  let tooltip = document.getElementById('tooltip');
  let selectedText;
  let startPos = textComponent.selectionStart;
  let endPos = textComponent.selectionEnd;
  selectedText = textComponent.value.substring(startPos, endPos);

  fetch('https://api.myjson.com/bins/z9wr6').then(data=>data.json()).then(data=>{
   let text = data.result.split('\n').reduce((acc,e)=>{
   acc.push(Array.prototype.concat.call([],e.split(' ')))
   return acc
  },[]);
  text.forEach(e=>{
    if(e.find(ele=>ele===selectedText)){
      tooltip.innerHTML = e.join(', ')
    } 
   })
 })
}

和工作的小提琴：https://jsfiddle.net/bfx8jdgh/