一次將多個字符索引對象數組替換為Javascript中的字符串

Question

我遇到了一個困難的算法問題。 我有下面的長字符串，我將其輸入到一個模型中，該模型從（在這種情況下是匿名的）患者的記錄中提取diseases和drugs 。 我想用html標記它以突出記錄中的疾病和葯物，我正在尋找一種可靠的機制來做到這一點。 現在，我只是反轉數組並一次顯示一個，但理想情況下，我可以同時顯示它們。

這是病歷的樣子

Ashton 是一位 78 歲的糖尿病患者。 他報告說，當他早上醒來和吃完飯后會感到胃痛，他將其描述為下腹部的疼痛感。 他確定他的飲食主要由碳水化合物和蛋白質組成，蔬菜作為配菜。 他受到手腕和手指炎症的嚴重影響，抱怨說他的關節炎正在惡化，一些手指肌張力障礙的報告，在刷牙等日常活動和吃食物和洗盤子等精細運動活動中手指被鎖定在適當的位置。 Santos 每天服用 20 毫克來氟米特，並根據需要服用 325 毫克阿司匹林。 他還在飯后服用 10 單位胰島素和飯前服用二甲雙胍。

這是模型中疾病和葯物陣列的樣子

nerArray['diseases']: [
    {
        "word": "dystonia",
        "start": 415,
        "end": 423
    },
    {
        "word": "arthritis",
        "start": 371,
        "end": 380
    },
    {
        "word": "wrist and finger inflammation",
        "start": 318,
        "end": 347
    },
    {
        "word": "stomach pains",
        "start": 68,
        "end": 81
    },
    {
        "word": "diabetes",
        "start": 34,
        "end": 42
    }
]
nerArray['drugs']: [
    {
        "word": "metformin",
        "start": 716,
        "end": 725
    },
    {
        "word": "insulin",
        "start": 686,
        "end": 693
    },
    {
        "word": "aspirin",
        "start": 641,
        "end": 648
    },
    {
        "word": "leflunomide",
        "start": 610,
        "end": 621
    }
]

我也給它們上色：

indexColor['drugs']: 'red',
indexColor['diseases']: 'green,

僅針對diseases ，以red突出顯示的已處理字符串如下所示：

Ashton is an 78 year old man with <span class="pa-1" style="color: red; border-radius:5px; border:1px solid red">diabetes</span>. He has reported feeling <span class="pa-1" style="color: red; border-radius:5px; border:1px solid red">stomach pains</span> when he awakens in the morning and after eating meals which he describes as an aching sensation in his lower abdomen. He identified his diet as mainly consisting of carbs with protein and vegetables as side dishes. Strongly affected by <span class="pa-1" style="color: red; border-radius:5px; border:1px solid red">wrist and finger inflammation</span>, he complains that his <span class="pa-1" style="color: red; border-radius:5px; border:1px solid red">arthritis</span> is worsening with some reports of <span class="pa-1" style="color: red; border-radius:5px; border:1px solid red">dystonia</span> of the fingers, with fingers getting locked in place during daily activities such as brushing teeth and fine motor activities like eating food and washing plates. Santos is taking 20 mg Leflunomide daily and 325mg of Aspirin as needed. He is also on 10 units of Insulin taken after meals and Metformin before meals.

和green的drugs ：

Ashton is an 78 year old man with diabetes. He has reported feeling stomach pains when he awakens in the morning and after eating meals which he describes as an aching sensation in his lower abdomen. He identified his diet as mainly consisting of carbs with protein and vegetables as side dishes. Strongly affected by wrist and finger inflammation, he complains that his arthritis is worsening with some reports of dystonia of the fingers, with fingers getting locked in place during daily activities such as brushing teeth and fine motor activities like eating food and washing plates. Santos is taking 20 mg <span class="pa-1" style="color: green; border-radius:5px; border:1px solid green">Leflunomide</span> daily and 325mg of <span class="pa-1" style="color: green; border-radius:5px; border:1px solid green">Aspirin</span> as needed. He is also on 10 units of <span class="pa-1" style="color: green; border-radius:5px; border:1px solid green">Insulin</span> taken after meals and <span class="pa-1" style="color: green; border-radius:5px; border:1px solid green">Metformin</span> before meals.

這是我現在用來為其中一個制作的方法，數組是顛倒的，因為我將它從后到前進行以使其更容易。

processForNerArray(index) { // index is either 'drugs' or 'diseases
      this.processedNote = this.note;
      const seqStart =
        '<span class="pa-1" style="color: ' +
        this.indexColor[index] +
        "; border-radius:5px; border:1px solid " +
        this.indexColor[index] +
        '">';
      const seqEnd = "</span>";

      this.nerArray[index].reverse().forEach((nerObj) => {
        this.processedNote =
          this.processedNote.slice(0, nerObj.start) +
          seqStart +
          this.processedNote.slice(
            nerObj.start,
            nerObj.end
          ) +
          seqEnd +
          this.processedNote.slice(
            nerObj.end
          );
      });
    },

Answer 1

您可以使用“for ... in”來執行此操作。 像這樣的東西：

 const nerArray = { diseases: [ { "word": "dystonia", "start": 415, "end": 423 }, { "word": "arthritis", "start": 371, "end": 380 }, { "word": "wrist and finger inflammation", "start": 318, "end": 347 }, { "word": "stomach pains", "start": 68, "end": 81 }, { "word": "diabetes", "start": 34, "end": 42 }], drugs: [ { "word": "metformin", "start": 716, "end": 725 }, { "word": "insulin", "start": 686, "end": 693 }, { "word": "aspirin", "start": 641, "end": 648 }, { "word": "leflunomide", "start": 610, "end": 621 }] }; for (let item in nerArray) { nerArray[item].forEach(e => console.log(e.word)) // processForNerArray(item) }

來源： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

Answer 2

無需使邏輯復雜化，您可以通過在兩個數組的每個對象中分配一個顏色屬性來簡單地實現它，然后連接成一個包含疾病和葯物對象的單個數組。

現在，您可以遍歷這個單個數組，並使用string.replace()方法將所有出現的單詞替換為 HTML 編碼的字符串。

現場演示（純 JavaScript） ：

 const diseaseArray = [ { "word": "dystonia", "start": 415, "end": 423 }, { "word": "arthritis", "start": 371, "end": 380 }, { "word": "wrist and finger inflammation", "start": 318, "end": 347 }, { "word": "stomach pains", "start": 68, "end": 81 }, { "word": "diabetes", "start": 34, "end": 42 } ]; const drugsArray = [ { "word": "Metformin", "start": 716, "end": 725 }, { "word": "Insulin", "start": 686, "end": 693 }, { "word": "Aspirin", "start": 641, "end": 648 }, { "word": "Leflunomide", "start": 610, "end": 621 } ]; // Assigning color property with value as 'green' in each object of a diseaseArray. diseaseArray.forEach(obj => { obj.color = 'green' }); // Assigning color property with value as 'red' in each object of a drugsArray. drugsArray.forEach(obj => { obj.color = 'red' }); // Now creating a new array by concatinating both the arrays. const newArr = [...diseaseArray, ...drugsArray]; // Input string let str = 'Ashton is an 78 year old man with diabetes. He has reported feeling stomach pains when he awakens in the morning and after eating meals which he describes as an aching sensation in his lower abdomen. He identified his diet as mainly consisting of carbs with protein and vegetables as side dishes. Strongly affected by wrist and finger inflammation, he complains that his arthritis is worsening with some reports of dystonia of the fingers, with fingers getting locked in place during daily activities such as brushing teeth and fine motor activities like eating food and washing plates. Santos is taking 20 mg Leflunomide daily and 325mg of Aspirin as needed. He is also on 10 units of Insulin taken after meals and Metformin before meals.'; // Iterate over this new array and replace the sub-string with the HTML. newArr.forEach(obj => { str = str.replace(obj.word, `<span class="pa-1" style="color: ${obj.color}; border-radius:5px; border:1px solid ${obj.color}">${obj.word}</span>`) }); // Finally binding the result into a HTML DOM. document.getElementById('result').innerHTML = str;

現場演示（Vue.js 格式） ：

 new Vue({ el: '#app', data: { str: 'Ashton is an 78 year old man with diabetes. He has reported feeling stomach pains when he awakens in the morning and after eating meals which he describes as an aching sensation in his lower abdomen. He identified his diet as mainly consisting of carbs with protein and vegetables as side dishes. Strongly affected by wrist and finger inflammation, he complains that his arthritis is worsening with some reports of dystonia of the fingers, with fingers getting locked in place during daily activities such as brushing teeth and fine motor activities like eating food and washing plates. Santos is taking 20 mg Leflunomide daily and 325mg of Aspirin as needed. He is also on 10 units of Insulin taken after meals and Metformin before meals.', diseaseArray: [ { "word": "dystonia", "start": 415, "end": 423 }, { "word": "arthritis", "start": 371, "end": 380 }, { "word": "wrist and finger inflammation", "start": 318, "end": 347 }, { "word": "stomach pains", "start": 68, "end": 81 }, { "word": "diabetes", "start": 34, "end": 42 } ], drugsArray: [ { "word": "Metformin", "start": 716, "end": 725 }, { "word": "Insulin", "start": 686, "end": 693 }, { "word": "Aspirin", "start": 641, "end": 648 }, { "word": "Leflunomide", "start": 610, "end": 621 } ] }, mounted() { // Assigning color property with value as 'green' in each object of a diseaseArray. this.diseaseArray.forEach(obj => { obj.color = 'green' }); // Assigning color property with value as 'red' in each object of a drugsArray. this.drugsArray.forEach(obj => { obj.color = 'red' }); // Now creating a new array by concatinating both the arrays. const newArr = [...this.diseaseArray, ...this.drugsArray]; // Iterate over this new array and replace the sub-string with the HTML. newArr.forEach(obj => { this.str = this.str.replace(obj.word, `<span class="pa-1" style="color: ${obj.color}; border-radius:5px; border:1px solid ${obj.color}">${obj.word}</span>`) }); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <p v-html="str"></p> </div>