在字符串中獲取 substring 之前和之后的所有內容

Question

我在 angular 工作，試圖創建一個填充空白的邏輯，用戶可以在 textarea 中輸入文本，然后從一個句子中創建盡可能多的空白。

例如：“這是一碗水果”

如果用戶決定將“碗”設為空白，他們只需在其周圍放置 2 個括號或單擊一個按鈕，上述句子將更改為

“這是[[碗]]水果。”

要做到這一點，如果用戶決定 select 這個詞，我有以下代碼並單擊按鈕使空白。

html.component

   <textarea (ngModel)]="blankText" #blankArea rows="4" cols="50"></textarea>
   <button class="btn btn-link" (click)="makeBlank(blankArea.selectionStart, blankArea.selectionEnd)">Make Blank</button>

組件.ts

  makeBlank(start, end) {
    this.blankStatement = [];
    let result;
    let sentence = this.blankText;
    let blankStart = '[[';
    let blankEnd = ']]';

    result = sentence.slice(0, start) + blankStart + sentence.slice(start);
    end = end + 2;
    result = result.slice(0, end) + blankEnd + result.slice(end);
    this.blankText = result;

    //Get Blank Data
    var part = result.substring(
      result.lastIndexOf('[[') + 2,
      result.lastIndexOf(']]')
    );
    let obj = {
      blank: part,
    };
    this.blanks.push(obj); //This saves the blank word i.e "Bowl"
   
  }

我想要實現的是獲取以下格式的數據：

blankStatement = 
[ 
{type: "Text", text: "This is a"}, 
{type: "Word", blank:"bowl"}, 
{type:"Text", text:"of fruit"}
]

空格之前和空格之后的文本是類型：文本。 空白處的文本是類型：“Word”。 我能夠在空白之前和之后獲取文本：

let preText = this.blankText.substring(0, preText.indexOf('['));
let postText = this.blankText.split(']').pop();

問題

如果我再做一個空白，讓我們從句子“This is a [[bowl]] of Fruit”中說，我也將“Fruit”設為空白，This is a [[bowl]] of [[Fruit]]。 那么我怎樣才能實現以下數組：

 blankStatement = 
[ 
{type: "Text", text: "This is a"}, 
{type: "Word", blank:"bowl"}, 
{type: "Text", text:"of"},
{type: "Word", blank:"fruit" }
]

Answer 1

您可以將.matchAll()與正則表達式一起使用來匹配所有出現的[[和]] 。 這是使用正則表達式完成的，該表達式還將方括號內的文本分組。 .matchAll()方法返回一個迭代器，然后您可以使用擴展語法將其轉換為數組... 。 數組中的元素包含數組的第零個和第一個索引中的匹配項和組，您可以使用解構賦值將其拉出。 您還可以提取其他屬性，例如發生匹配的索引。 使用它，您可以計算出每個匹配之間的文本，然后將其添加到結果數組中。 然后，您可以執行過濾器以從結果中刪除任何包含空的 object。 請參見下面的示例：

 const str = "This is a [[bowl]] of [[Fruit]]"; const getWordsAndText = (str) => { const matches = [...str.matchAll(/\[\[([^\]\]]+)\]\]/g)]; let lastIndex = 0; return matches.flatMap(({0: match, 1: blank, index, input}) => { const arr = [ {type: "Text", text: input.substring(lastIndex, index).trim()}, {type: "Word", blank: blank.toLowerCase()} ]; lastIndex = index + match.length; return arr; }).concat({type: "Text", text: str.substring(lastIndex).trim()}).filter(({text}) => text;== ""). } console;log(getWordsAndText(str));

如果您需要對此進行優化，您可以更加考慮從.flatMap()返回的內容，這樣，您就不需要對結果執行第二次迭代來過濾。