how to fetch line from text file in javascript

Question

I am developing web portal for ASR (Automatic speech recognition). As you all know that ASR won't give the 100% correct result. The main reason of getting wrong result are speaking behavior of person, noise, style of speaking, voice intensity, homophones (buy, bye. cite, site) etc. I am planning to do post processing by using web portal. I defined textarea where I get the recognized text. If user found that wrong word in text area then he will double click on wrong word in textarea and after word selection in same place display similar word pronunciation option (Similar pronunciation words are stored in text file. one line contains same pronunciation words) exa. If user selected word "sad" then in option he will get "sad, mad, bad" etc. I have created text file which contains following lines

sad, mad, bad

hero, zero

site, cite

buy,bye

If user select word "site" then he will get "site, cite" in textarea and finally user will select his correct word. Indirectly I am searching word in text file and if word found in text file then copy whole line and display as option in textarea (like google display's search options after entering text)

I wrote small code but getting failed to done all functionalities. My text file is locally stored.

    <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>

I am new in website development.

Possible duplicate of [How to read a local text file?](https://stackoverflow.com/questions/14446447/how-to-read-a-local-text-file) — helle, Oct 16 '19 at 07:38
See dublicate question: https://stackoverflow.com/questions/14446447/how-to-read-a-local-text-file — helle, Oct 16 '19 at 07:38

score 0 · Answer 1 · answered Oct 16 '19 at 08:25

I've solved your problem, but I'm not using txt file, but json (because of CORS problem in fiddle), but if you create txt file it will work same. One line for one prompt words in file.

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(', ')
    } 
   })
 })
}

And working fiddle: https://jsfiddle.net/bfx8jdgh/

Source map error: TypeError: NetworkError when attempting to fetch resource. Resource URL: moz-extension://cb75433b-8465-4e8f-a096-7363a2b5fc90/dependencies/DOMPurify-master/dist/purify.min.js — Amol, Oct 16 '19 at 08:58

how to fetch line from text file in javascript

1 Answers1