記一次解析字元串：在目標字元串中找出指定的N個字元串所在的起始位置

来源:https://www.cnblogs.com/du-blog/archive/2020/03/28/12588672.html
-Advertisement-
Play Games

我們的項目上有一個這樣的場景：一個下拉選擇框，同時要支持用戶輸入，將最終的結果顯示在文本框中（就是普通的字元串，用戶在下拉框中選擇的放在【】中）……不知道能不能想象出來，寫上一篇筆記的時候發現和咱們博客園選擇“tag 標簽”的功能有點接近啊，我們的ui還是跟她有些不同。 還是拿一個具體的例子說一下吧 ...


　　我們的項目上有一個這樣的場景：一個下拉選擇框，同時要支持用戶輸入，將最終的結果顯示在文本框中（就是普通的字元串，用戶在下拉框中選擇的放在【】中）……不知道能不能想象出來，寫上一篇筆記的時候發現和咱們博客園選擇“tag 標簽”的功能有點接近啊，我們的ui還是跟她有些不同。

　　還是拿一個具體的例子說一下吧。下拉框中有“姓名”、“年齡”兩個選擇項，你可以選擇也可以自己在文本框中輸入，例如文本框中的內容是：自定義001【姓名】自定義002【年齡】自定義003。我們要做的就是解析這個字元串，我們需要識別出其中的“姓名”和“年齡”（無論是用戶選擇的，還是用戶輸入的），最後的結果應該是這樣的 ["自定義001","【姓名】","自定義002","【年齡】","自定義003"]。

　　這裡還要在補充一點他們的要求：就是可以同時匹配多個時候（開始的索引位置相同，但是結尾不同），我們需要識別下拉列表中的第一個。有點抽象，還是說一個例子吧。這裡下拉列表中有“姓名】”和“姓名”兩個，這時候文本框中的內容是：自定義001【姓名】】自定義002。交換下拉列表中的順序，最終得到的結果是不一樣的。

　　說了這麼一大推，感覺好沒意思啊！其實還是蠻有意思的（解析這個）。遇到這個問題之後最先想到的就是，遍歷下拉框數組，利用indexOf查找看看有沒有，之後截取三部分（前面的、自己、後面的），之後遞歸處理前面和後面的部分。我去，想著簡單但是寫的時候好費勁啊！最後查了一下，看看有沒有這種方法，在目標字元串中找出指定的N個字元串的所在起始位置，一個方法可以搞定的那種，最後還是正則表達式救了我。現在我可以得到下拉選項中的每一項在目標字元串的起始位置了，剩下的就是利用這些起始位置去截取目標字元串了，腦袋一熱將這些這些索引位置放到一個數組中（去重），之後排序，之後兩兩已截取不就完了，這樣寫完之後就真的涼涼了，很多字元串都解析錯誤，之後弄了好幾版都不行，決定靜下來分析一下，看看到底有多少種情況。之前竟然還想到數據去重（確實是第一次寫就去重了），但是就沒有想想什麼情況下有重覆的情況出現：索引開始相同，某一個的索引結束是另一個的開始……後來我直接畫圖了，列出了12中情況，在下麵可以在紙上畫，這裡呢？我也又找到了一個神器：圖形計算器，你看一下：

　　一共有12中情況，要是一個一個if else 太費勁了，細看一下發現中間的8種情況是有問題的，如果將這8種情況下的起始索引都放到數組中去截取字串，那麼他就會將下拉框中的下拉項（也就是圖中兩個中的一個截斷），所以呢用了一下排除法。之後呢，為了驗證我也列舉了上面的6中情況（下麵分別給出例子），感覺前面的6個和後面的6個是對稱的……

//    參考：
//        https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll
//        https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll
//    待選列表（下拉列表項）
var toBeSelectedList = [{
        dispalyName: "姓名",
        dispalyIndex: "name1"
    }, {
        dispalyName: "年齡",
        dispalyIndex: "age"
    }, {
        dispalyName: "姓【名",
        dispalyIndex: "name2"
    }, {
        dispalyName: "名】001",
        dispalyIndex: "name3"
    }, {
        dispalyName: "【姓名",
        dispalyIndex: "name4"
    }, {
        dispalyName: "1【姓名】1",
        dispalyIndex: "name5"
    }, {
        dispalyName: "姓名】",
        dispalyIndex: "name6"
    }
];
var tempDispalyNameArr = toBeSelectedList.map(function (item) {
        return item.dispalyName;
    });

//    解析方法
var getTargetArrByUserInputAndFilterStrs = function (userInputStr, filterStrs) {
    var tempIndexPosArr = [],
    tempIndexPosObjArr = [],
    tempFilterStrAddCharObj = {};
    filterStrs.forEach(function (filterStr, index) {
        var tempKey = '【' + filterStr + '】',
        tempRegexp = new RegExp(tempKey, 'g'),
        match;
        tempFilterStrAddCharObj[tempKey] = filterStr;
        while ((match = tempRegexp.exec(userInputStr)) !== null) {
            var tempFilterPosArrs = tempIndexPosObjArr.filter(function (startAndLastIndexItem) {
                    // return (match.index >= startAndLastIndexItem.index && match.index < startAndLastIndexItem.lastIndex) ||
                    // (match.index < startAndLastIndexItem.index && tempRegexp.lastIndex >= startAndLastIndexItem.lastIndex);
                    return !(tempRegexp.lastIndex <= startAndLastIndexItem.index || match.index >= startAndLastIndexItem.lastIndex);
                });
            if (tempFilterPosArrs.length === 0) {
                tempIndexPosObjArr.push({
                    index: match.index,
                    lastIndex: tempRegexp.lastIndex
                });
            }
        }
    });
    tempIndexPosObjArr.forEach(function (indexObj) {
        if (tempIndexPosArr.indexOf(indexObj.index) < 0) {
            tempIndexPosArr.push(indexObj.index);
        }
        if (tempIndexPosArr.indexOf(indexObj.lastIndex) < 0) {
            tempIndexPosArr.push(indexObj.lastIndex);
        }
    });
    if (tempIndexPosArr.indexOf(0) < 0) {
        tempIndexPosArr.push(0);
    }
    if (tempIndexPosArr.indexOf(userInputStr.length) < 0) {
        tempIndexPosArr.push(userInputStr.length);
    }
    tempIndexPosArr = tempIndexPosArr.sort(function (a, b) {
            return a - b;
        });

    var lastNeedArr = [];
    tempIndexPosArr.forEach(function (posIndex, index) {
        if (index < tempIndexPosArr.length - 1) {
            var tempIsOneFilterStr = userInputStr.substring(posIndex, tempIndexPosArr[index + 1]);
            // if(tempFilterStrAddCharObj.hasOwnProperty(tempIsOneFilterStr)){
            // tempIsOneFilterStr=tempFilterStrAddCharObj[tempIsOneFilterStr]
            // }
            lastNeedArr.push(tempIsOneFilterStr);
        }
    });
    return lastNeedArr;
};
//    等待解析的字元串（也就是用戶選擇或者輸入的最終結果）

var waitAnalysisStr1 = "自定義001【姓名】自定義002【年齡】自定義003";
var toBeSelectedList1_1 = ["姓名", "年齡"]; //    ["自定義001","【姓名】","自定義002","【年齡】","自定義003"]
var toBeSelectedList1_2 = ["年齡", "姓名"]; //    ["自定義001","【姓名】","自定義002","【年齡】","自定義003"]

var waitAnalysisStr2 = "自定義001【姓名】【年齡】自定義002";
var toBeSelectedList2_1 = ["姓名", "年齡"]; //    ["自定義001","【姓名】","【年齡】","自定義002"]
var toBeSelectedList2_2 = ["年齡", "姓名"]; //    ["自定義001","【姓名】","【年齡】","自定義002"]

var waitAnalysisStr3 = "自定義001【姓【名】001】自定義002";
var toBeSelectedList3_1 = ["姓【名", "名】001"]; //    ["自定義001","【姓【名】","001】自定義002"]
var toBeSelectedList3_2 = ["名】001", "姓【名"]; //    ["自定義001【姓","【名】001】","自定義002"]  

var waitAnalysisStr4 = "自定義001【【姓名】自定義002"; //    【姓名 、 姓名    交換順序試試
var toBeSelectedList4_1 = ["【姓名", "姓名"]; //    ["自定義001","【【姓名】","自定義002"]
var toBeSelectedList4_2 = ["姓名", "【姓名"]; //    ["自定義001【","【姓名】","自定義002"]

var waitAnalysisStr5 = "自定義001【1【姓名】1】自定義002"; //    1【姓名】1 、 姓名    交換順序試試
var toBeSelectedList5_1 = ["1【姓名】1", "姓名"]; //    ["自定義001","【1【姓名】1】","自定義002"]
var toBeSelectedList5_2 = ["姓名", "1【姓名】1"]; //    ["自定義001【1","【姓名】","1】自定義002"]

var waitAnalysisStr6 = "自定義001【姓名】】自定義002"; //    姓名 、 姓名】    交換順序試試
var toBeSelectedList6_1 = ["姓名】", "姓名"]; //    ["自定義001","【姓名】】","自定義002"]
var toBeSelectedList6_2 = ["姓名", "姓名】"]; //    ["自定義001","【姓名】","】自定義002"]

var tempTargetArr1_1 = getTargetArrByUserInputAndFilterStrs(waitAnalysisStr1, toBeSelectedList1_1);
console.log(JSON.stringify(tempTargetArr1_1));
var tempTargetArr1_2 = getTargetArrByUserInputAndFilterStrs(waitAnalysisStr1, toBeSelectedList1_2);
console.log(JSON.stringify(tempTargetArr1_2));

var tempTargetArr2_1 = getTargetArrByUserInputAndFilterStrs(waitAnalysisStr2, toBeSelectedList2_1);
console.log(JSON.stringify(tempTargetArr2_1));
var tempTargetArr2_2 = getTargetArrByUserInputAndFilterStrs(waitAnalysisStr2, toBeSelectedList2_2);
console.log(JSON.stringify(tempTargetArr2_2));

var tempTargetArr3_1 = getTargetArrByUserInputAndFilterStrs(waitAnalysisStr3, toBeSelectedList3_1);
console.log(JSON.stringify(tempTargetArr3_1));
var tempTargetArr3_2 = getTargetArrByUserInputAndFilterStrs(waitAnalysisStr3, toBeSelectedList3_2);
console.log(JSON.stringify(tempTargetArr3_2));

var tempTargetArr4_1 = getTargetArrByUserInputAndFilterStrs(waitAnalysisStr4, toBeSelectedList4_1);
console.log(JSON.stringify(tempTargetArr4_1));
var tempTargetArr4_2 = getTargetArrByUserInputAndFilterStrs(waitAnalysisStr4, toBeSelectedList4_2);
console.log(JSON.stringify(tempTargetArr4_2));

var tempTargetArr5_1 = getTargetArrByUserInputAndFilterStrs(waitAnalysisStr5, toBeSelectedList5_1);
console.log(JSON.stringify(tempTargetArr5_1));
var tempTargetArr5_2 = getTargetArrByUserInputAndFilterStrs(waitAnalysisStr5, toBeSelectedList5_2);
console.log(JSON.stringify(tempTargetArr5_2));

var tempTargetArr6_1 = getTargetArrByUserInputAndFilterStrs(waitAnalysisStr6, toBeSelectedList6_1);
console.log(JSON.stringify(tempTargetArr6_1));
var tempTargetArr6_2 = getTargetArrByUserInputAndFilterStrs(waitAnalysisStr6, toBeSelectedList6_2);
console.log(JSON.stringify(tempTargetArr6_2));
測試代碼

　　其實到現在，都不知道現在的演算法是不是包住了所有情況，雖然下麵的例子都測試通過了，還是等著真正的測試人員去測試吧！如果哪位大神有更好的方法請賜教，謝謝！

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL資料庫02
    MySQL資料庫 前言： 前面我們瞭解了什麼是資料庫，什麼是MySQL資料庫以及如何運用，接下來我們接著深入學習MySQL。 (提前聲明，以下所提供的事例不標準，僅供參考) 資料庫的備份與還原： 備份： 在cmd中輸入 mysqldump -u root -p 資料庫名稱 > 備份路徑 還原：兩種方 ...
  • h2資料庫作為記憶體型與springboot+mybatis的案例
    一.前言 H2 是一個用 Java 開發的嵌入式資料庫，它本身只是一個類庫，即只有一個 jar 文件，可以直接嵌入到應用項目中。H2 主要有如下三個用途： 第一個用途，也是最常使用的用途就在於可以同應用程式打包在一起發佈，這樣可以非常方便地存儲少量結構化數據。 第二個用途是用於單元測試。啟動速度快， ...
  • mysql入門（五）
    SQL編程 1).if-elseif-else語句 語法: if 條件 then //條件1 elseif 條件 then //條件2 else //條件3 end if; 示例演示： create procedure pro_9(in grade int) -- 輸入等級 begin if gra ...
  • MySQL資料庫升級
    當前不少系統的資料庫依舊是MySQL5.6，由於MySQL5.7及MySQL8.0在性能及安全方面有著很大的提升，因此需要升級資料庫。本文通過邏輯方式、物理方式原地升級來介紹MySQL5.6 升級至MySQL5.7的方法，並介紹其使用場景。 1. 邏輯方式升級 邏輯方式升級其實就是通過邏輯備份工具（ ...
  • SQL Server中GETDATE轉換時間時註意事項
    在SQL Server中，有時候查詢數據時，需要限定查詢時間範圍。此時需要對時間進行運算， 如下所示： USE AdventureWorks2014;GOSELECT *FROM HumanResources.EmployeeWHERE ModifiedDate > GETDATE() - 20; ... ...
  • Android 上預覽 PDF 文件
    使用 WebView 配合 pdf.js 在 Android 上顯示 PDF 文件 ...
  • Cookie SameSite屬性介紹及其在ASP.NET項目中的應用
    一、Cookie SameSite屬性介紹 就像大家已經知道的，一旦設置Cookie之後，在Cookie失效之前瀏覽器會一直將這個Cookie在後續所有的請求中都傳回到Server端。我們的系統會利用Cookie這個特性做很多事情，但通常我們會在Cookie中存放加密的用戶身份，在Server端根據 ...
  • js自定義的可分類可搜索的下拉框組件
    html5搜索框結合datalist可以實現帶搜索功能的下拉框 不過嘗試了下，使用optgroup分組發現沒效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>search</title> </head> ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類