How to implement the longest common subsequence in javascript

The longest common sequence (longest common sequence) and the longest common substring (longest common substring) are not the same thing. The following article mainly introduces you to the relevant information about the implementation of the longest common subsequence in JavaScript. , friends in need can refer to it.

Introduction

The Longest Common Subsequence LCS is to extract all the possible subsequences from the given two sequences X and Y. The possible extra characters are arranged in the order in which they are arranged in the original sequence. The algorithm for LCS problems has a wide range of uses. For example, in the management of different versions of software, the LCS algorithm is used to find the similarities and differences between the old and new versions; in software testing, the LCS algorithm is used to compare recorded and played back sequences. In the field of genetic engineering, the LCS algorithm is used The algorithm checks the similarities and differences between the patient's DNA strand and the bond's DNA strand; in the anti-plagiarism system, the LCS algorithm is used to check the plagiarism rate of the paper. The LCS algorithm can also be used for program code similarity measurement, human running sequence retrieval, video segment matching, etc., so research on the LCS algorithm has high application value.

Basic concepts

Subsequence: A subsequence of a specific sequence is zero or more elements in a given sequence The result obtained after removing it (without changing the relative order between elements). For example, the subsequences of the sequence are: , ,

Common subsequence: Given sequences X and Y, sequence Z is a subsequence of X and a subsequence of Y, then Z is the common subsequence of X and Y. For example, X=[A,B,C,B,D,A,B], Y=[B,D,C,A,B,A[, then the sequence Z=[B,C,A] is X and Y The common subsequence of , its length is 3. But Z is not the longest common subsequence of X and Y, and the sequences [B, C, B, A] and [B, D, A, B] are also the longest common subsequences of X and Y, with a length of 4 , and X and Y do not have a common subsequence with a length greater than or equal to 5. For the common subsequences of the sequence [A, B, C] and the sequence [E, F, G], there is only the empty sequence [].

Longest common subsequence: Given sequences X and Y, select the one or several with the longest length from all their common subsequences.
Substring: A new series formed by deleting zero or several characters from the front or the end of a sequence, or both at the same time. The difference is that subsequences can have characters cut out from the middle. How many subsequences are there in the string cnblogs? Obviously there are 27 of them, such as cb, cgs, etc. are all their subsequences

Give me a picture to explain:

We can see The subsequence is not necessarily continuous, what is continuous is the substring.

Problem Analysis

We still start the analysis from a matrix and derive the state transition equation ourselves.

First of all, we convert the problem into a concept that is familiar enough to the front end. Instead of calling it serially, it can be thought of as an array or a string. To keep things simple, let's just assume that two strings are being compared.

We focus on the concept of "subsequence", which can delete multiple or zero ones, or all of them. At this time our first subsequence is an empty string (if our sequence is not a string, we can still)! This is something you really need to pay attention to! Many people just can't understand the chart in "Introduction to Algorithms", and there are also many bloggers who don't pretend to understand. We always compare from left to right, and of course the first string, because it is the height of the matrix, is placed vertically.

##""##ABCDAB If X ＝ "ABCDAB" and Y ＝ "BDCABA", each takes out the shortest sequence, that is, compares the empty string with the empty string . The solution of the LCS equation is a number, so this table can only be filled with numbers. The length of the common area of ​​two empty strings is 0.

x	""	B	D	C	A	B	A

x##""0ABCDAB

Then we don’t move X and continue to let the empty string come out of the array, and Y lets “B” come out of the array. Obviously, the length of their common areas is 0. Y is replaced with other characters, D, C, or, they Continuous combinations of DC and DDC, the situation has not changed, it is still 0. Therefore, the first row is 0. Then we do not move Y, and Y only produces empty strings, then it is the same as the above analysis, all are 0, the first The columns are all 0.

""	B	D	C	A	B	A

#""0000000##A##B0C0D0A0 B0The LCS problem is a little different from the backpack problem. The backpack problem can also be set to -1 OK, and the longest common subsequence has the left and upper sides fixed from the beginning because of the occurrence of empty subsequences.

x	""	B	D	C	A	B	A
0

Then we enlarge the problem a little further. This time both sides produce a character. Obviously, only when both are the same, can there be a common subsequence that is not an empty string, and the length can also be understood as 1.

A is "X", Y is any subsequence of "BDCA"

##x""##""00000000##B0C0D 0##ABContinue to fill in the blanks to the right, how to fill in? Obviously, LCS cannot be greater than the length of X. How can the subsequence of Y starting from the A string be equal to 1 compared with the A sequence of B. x

B	D	C	A	B	A
												##A	0
0	0	1
0
0

""

BD#""00000 000##B0C0D0A0B0x""B

C	A	B	A
										##A	0	0	0
1	1	1
	If Then let's look at B first, ${X_1} == ${Y_0}, we get a new public substring, and we should add 1. why? Because our matrix is ​​a state table, describing the state migration process from left to right and top to bottom, and these states are accumulated based on existing states. What we need to confirm now is the relationship between the value of the grid we want to fill in and the values ​​of the grids around it that have already been filled in. At present, there is too little information and it is just an isolated point, so just fill in 1.

D

CABA00 ##A0000111##C0D0A0B0

Then we let Y have an extra D as a helper, {"",A,B,AB} vs {"",B,D,BD}. Obviously, continue to fill in 1. Fill in until the second one of Y Before B, it is all 1. Because when it comes to BDCAB, they have another common subsequence, AB.

										#""	0	0	0
0	0
								##B	0	1

#""00000 00##A##B01111 2000 0At this step, we can summarize some rules. Then we will verify our ideas through calculations and add new rules or limiting conditions to improve them.

x	""	B	D	C	A	B	A
0	0	0	0	1	1	1
													#C
	D
	A
	B

Y Send all the characters, X is still 2 characters, after careful observation, still fill in 2.

Look at the five lines, send more X If the subsequence set of C and ABC is larger than the subsequence set of AB, then it and the B subsequence set of Y are larger. Even if they are not larger, they cannot be smaller than the original ones. Obviously the newly added C cannot become a combat power and is not a common character between the two, so the value should be equal to the subsequence set of AB.

×""##""0000 0000##B0111122##D0A0B0

And we can be sure that if the characters to be compared between the two strings are different, then the grid to be filled is related to the left or upper side, and the larger side will be used.

If the compared characters are the same, don’t worry, it happens that the C of X needs to be compared with the C of Y, that is, the subsequence set of ABC {"",A,B,C,AB,BC, ABC} is compared with the subsequence set {"",B,D,C,BD,DC,BDC} of BDC, and the common substrings obtained are "",B,D. At this time, the conclusion is still the same as before. When the characters are equal, its corresponding grid value is equal to the value of the left, right, and upper left corners, and the left, upper, and upper left sides are always equal. These mysteries require more rigorous mathematical knowledge to demonstrate.

Suppose there are two arrays, A and B. A[i] is the i-th element of A, and A(i) is the prefix consisting of the first element to the i-th element of A. m(i, j) is the longest common subsequence length of A(i) and B(j).

Due to the recursive nature of the algorithm itself, in fact, we only need to prove that for a certain i and j:

m(i, j) = m(i-1, j-1) 1 ( When A[i] = B[j])

m(i, j) = max( m(i-1, j), m(i, j-1) ) (When A[i ] ! = B[j])

The first formula is easy to prove, that is, when A[i] = B[j]. You can use counter-proof, assuming m(i, j) > m(i-1, j-1) 1 (m(i, j) cannot be less than m(i-1, j-1) 1, the reason is obvious) , then we can deduce the contradictory result that m(i-1, j-1) is not the longest.

The second one is a bit tricky. When A[i] != B[j], it is still a disproof, assuming m(i, j) > max( m(i-1, j), m(i, j-1) ).

By disproving the hypothesis, it can be obtained that m(i, j) > m(i-1, j). This can be deduced that A[i] must be in the LCS sequence corresponding to m(i, j) (contradictory evidence is available). And since A[i] != B[j], B[j] must not be in the LCS sequence corresponding to m(i, j). So it can be deduced that m(i, j) = m(i, j-1). This leads to results that contradict the hypothesis anyway.

Get certified.

We now use the following equation to continue filling in the table.

Program implementation

//by 司徒正美
function LCS(str1, str2){
  var rows = str1.split("")
  rows.unshift("")
  var cols = str2.split("")
  cols.unshift("")
  var m = rows.length 
  var n = cols.length 
  var dp = []
  for(var i = 0; i < m; i++){ 
   dp[i] = []
   for(var j = 0; j < n; j++){ 
    if(i === 0 || j === 0){
     dp[i][j] = 0
     continue
    }
    
    if(rows[i] === cols[j]){ 
     dp[i][j] = dp[i-1][j-1] + 1 //对角＋1
    }else{
     dp[i][j] = Math.max( dp[i-1][j], dp[i][j-1]) //对左边，上边取最大
    }
   }
   console.log(dp[i].join(""))//调试
  } 
  return dp[i-1][j-1]
 }

LCS can be further simplified, just by moving the position, eliminating the need to generate a new array

//by司徒正美
function LCS(str1, str2){
 var m = str1.length 
 var n = str2.length
 var dp = [new Array(n+1).fill(0)] //第一行全是0
 for(var i = 1; i <= m; i++){ //一共有m+1行
  dp[i] = [0] //第一列全是0
  for(var j = 1; j <= n; j++){//一共有n+1列
   if(str1[i-1] === str2[j-1]){ 
    //注意这里，str1的第一个字符是在第二列中，因此要减1，str2同理
    dp[i][j] = dp[i-1][j-1] + 1 //对角＋1
   } else {
     dp[i][j] = Math.max( dp[i-1][j], dp[i][j-1]) 
   }
  }
 } 
 return dp[m][n];
}

Print an LCS

#We will give the printing function and first look at how to print one. We start looking from the lower right corner and end at the top line. Therefore the target string is constructed in reverse order. In order to avoid using troublesome intermediate quantities such as stringBuffer, we can implement it recursively. Each time the program is executed, only one string is returned, otherwise an empty string is returned. PrintLCS(x,y,...) str[i ] Add them together to get the string we require.

We write another method to verify whether the string we get is a real LCS string. As a person who is already working, I cannot write code like a student in school and put it online without doing unit testing for others to step on.

//by 司徒正美，打印一个LCS
function printLCS(dp, str1, str2, i, j){
 if (i == 0 || j == 0){
  return "";
 }
 if( str1[i-1] == str2[j-1] ){
  return printLCS(dp, str1, str2, i-1, j-1) + str1[i-1];
 }else{
  if (dp[i][j-1] > dp[i-1][j]){
   return printLCS(dp, str1, str2, i, j-1);
  }else{
   return printLCS(dp, str1, str2, i-1, j);
  }
 }
}
//by司徒正美， 将目标字符串转换成正则，验证是否为之前两个字符串的LCS
function validateLCS(el, str1, str2){
 var re = new RegExp( el.split("").join(".*") )
 console.log(el, re.test(str1),re.test(str2))
 return re.test(str1) && re.test(str2)
}

Use:

function LCS(str1, str2){
 var m = str1.length 
 var n = str2.length
 //....略，自行补充
 var s = printLCS(dp, str1, str2, m, n)
 validateLCS(s, str1, str2)
 return dp[m][n]
}
var c1 = LCS( "ABCBDAB","BDCABA");
console.log(c1) //4 BCBA、BCAB、BDAB
var c2 = LCS("13456778" , "357486782" );
console.log(c2) //5 34678 
var c3 = LCS("ACCGGTCGAGTGCGCGGAAGCCGGCCGAA" ,"GTCGTTCGGAATGCCGTTGCTCTGTAAA" );
console.log(c3) //20 GTCGTCGGAAGCCGGCCGAA

Print all LCS

The idea is similar to the above , let us note that there is a Math.max value in the LCS method, which actually integrates three situations, so three strings can be forked. Our method will return an es6 collection object for automatic removal. Then each time the new set is used to merge the strings of the old set.

//by 司徒正美 打印所有LCS
function printAllLCS(dp, str1, str2, i, j){
 if (i == 0 || j == 0){
  return new Set([""])
 }else if(str1[i-1] == str2[j-1]){
  var newSet = new Set()
  printAllLCS(dp, str1, str2, i-1, j-1).forEach(function(el){
   newSet.add(el + str1[i-1])
  })
  return newSet
 }else{
  var set = new Set()
  if (dp[i][j-1] >= dp[i-1][j]){
   printAllLCS(dp, str1, str2, i, j-1).forEach(function(el){
    set.add(el)
   })
  }
  if (dp[i-1][j] >= dp[i][j-1]){//必须用>=，不能简单一个else搞定
   printAllLCS(dp, str1, str2, i-1, j).forEach(function(el){
    set.add(el)
   })
  } 
  return set
 } 
 }

Using:

function LCS(str1, str2){
 var m = str1.length 
 var n = str2.length
 //....略，自行补充
 var s = printAllLCS(dp, str1, str2, m, n)
 console.log(s)
 s.forEach(function(el){
  validateLCS(el,str1, str2)
  console.log("输出LCS",el)
 })
 return dp[m][n]
}
var c1 = LCS( "ABCBDAB","BDCABA");
console.log(c1) //4 BCBA、BCAB、BDAB
var c2 = LCS("13456778" , "357486782" );
console.log(c2) //5 34678 
var c3 = LCS("ACCGGTCGAGTGCGCGGAAGCCGGCCGAA" ,"GTCGTTCGGAATGCCGTTGCTCTGTAAA" );
console.log(c3) //20 GTCGTCGGAAGCCGGCCGAA

Space optimization

Using rolling array:

function LCS(str1, str2){
 var m = str1.length 
 var n = str2.length
 var dp = [new Array(n+1).fill(0)],now = 1，row //第一行全是0
 for(var i = 1; i <= m; i++){ //一共有2行
  row = dp[now] = [0] //第一列全是0
  for(var j = 1; j <= n; j++){//一共有n+1列
   if(str1[i-1] === str2[j-1]){ 
    //注意这里，str1的第一个字符是在第二列中，因此要减1，str2同理
    dp[now][j] = dp[i-now][j-1] + 1 //对角＋1
   } else {
    dp[now][j] = Math.max( dp[i-now][j], dp[now][j-1]) 
   }
  }
  now = 1- now; //1-1=>0;1-0=>1; 1-1=>0 ...
 } 
 return row ? row[n]: 0
}

Dangerous recursive solution

A subsequence of str1 corresponds to a subsequence of the subscript sequence {1, 2, …, m} sequence, therefore, str1 has a total of ${2^m}$ different subsequences (the same is true for str2, such as ${2^n}$), so the complexity reaches an astonishing exponential time (${2^m * 2^ n}$).

//警告，字符串的长度一大就会爆栈
function LCS(str1, str2, a, b) {
  if(a === void 0){
   a = str1.length - 1
  }
  if(b === void 0){
   b = str2.length - 1
  }
  if(a == -1 || b == -1){
   return 0
  } 
  if(str1[a] == str2[b]) {
   return LCS(str1, str2, a-1, b-1)+1;
  }
  if(str1[a] != str2[b]) {
   var x = LCS(str1, str2, a, b-1)
   var y = LCS(str1, str2, a-1, b)
   return x >= y ? x : y
  }
 }

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Using vue to implement secondary route setting method

react project development

Implement multiple routing implementations in Vue-Router2.X

The above is the detailed content of How to implement the longest common subsequence in javascript. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

js longest common subsequence

source：php.cn

Previous article：How to get file upload progress in Node.js? Next article：About how vue implements dynamic loading of image src

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

• Problems with pop-up windows not being centered in weebox
  2018-06-23 18:19:43
• How to use excel-like components in vue+canvas
  2018-06-23 18:17:39
• How to call class in JavaScript
  2018-06-23 18:11:37
• How to implement pull-up refresh function using Vue framework
  2018-06-23 18:10:14
• How to implement image cropping component using Vue mobile terminal
  2018-06-23 18:06:43
• About WeChat mini program templates and modular usage (detailed tutorial)
  2018-06-23 18:04:28
• How to implement pull-up loading function in vue2
  2018-06-23 18:02:45
• How to implement three-level linkage using Vue2
  2018-06-23 18:00:45
• How to implement data request display loading graph in vue2
  2018-06-23 17:58:23
• How to set up and monitor using element full screen
  2018-06-23 17:56:41

Latest Issues

VueJS 2 application compiled to 1 We are building an application using VueJS as frontend. But we're kind of merging 2 apps i...

From 2024-04-03 12:00:59

0

1

371

Simplify video playback in emails: ensure instant playback, no download screen required I'm not sure "which wall to lean the ladder against" here, or even the correct t...

From 2024-03-30 17:12:51

0

1

433

Related Topics

More>

• js regular expression
• js gets current time
• js string to array
• what does js mean
• js method to delete node
• js method to intercept string
• The difference between concat and push in JS
• Introduction to the method of intercepting strings in js

Popular Recommendations

• what does js mean
• How to convert string to array in js?
• How to refresh the page using javascript
• How to delete an item in js array
• How to use sqrt function

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

• 
  The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

  1415838
• 
  PHP introductory tutorial one: Learn PHP in one week

  4255043
• 
  JAVA Beginner's Video Tutorial

  2466117
• 
  Little Turtle's zero-based introduction to learning Python video tutorial

  502890
• 
  PHP zero-based introductory tutorial

  843259

• 
  The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

  1415838 times of learning
• 
  JAVA Beginner's Video Tutorial

  2466117 times of learning
• 
  Little Turtle's zero-based introduction to learning Python video tutorial

  502890 times of learning
• 
  Quick introduction to web front-end development

  215197 times of learning
• 
  Master PS video tutorials from scratch

  874596 times of learning

• 
  [Web front-end] Node.js quick start

  6217 times of learning
• 
  Complete collection of foreign web development full-stack courses

  4847 times of learning
• 
  Go language practical GraphQL

  4078 times of learning
• 
  550W fan master learns JavaScript from scratch step by step

  605 times of learning
• 
  Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours

  20755 times of learning

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

• [form button] jQuery enterprise message form contact code
• [Player special effects] HTML5 MP3 music box playback effects
• [Menu navigation] HTML5 cool particle animation navigation menu special effects
• [form button] jQuery visual form drag and drop editing code
• [Player special effects] VUE.JS imitation Kugou music player code
• [html5 special effects] Classic html5 pushing box game
• [Picture special effects] jQuery scrolling to add or reduce image effects
• [Photo album effects] CSS3 personal album cover hover zoom effect

• [Front-end template] Home Decor Cleaning and Repair Service Company Website Template
• [Front-end template] Fresh color personal resume guide page template
• [Front-end template] Designer Creative Job Resume Web Template
• [Front-end template] Modern engineering construction company website template
• [Front-end template] Responsive HTML5 template for educational service institutions
• [Front-end template] Online e-book store mall website template
• [Front-end template] IT technology solves Internet company website template
• [Front-end template] Purple style foreign exchange trading service website template

• [PNG material] Cute summer elements vector material (EPS PNG)
• [PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)
• [banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)
• [PNG material] Golden graduation cap vector material (EPS PNG)
• [PNG material] Black and white style mountain icon vector material (EPS PNG)
• [PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses
• [banner picture] Flat style Arbor Day banner vector material (AI+EPS)
• [PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)

• [Front-end template] Home Decor Cleaning and Repair Service Company Website Template
• [Front-end template] Fresh color personal resume guide page template
• [Front-end template] Designer Creative Job Resume Web Template
• [Front-end template] Modern engineering construction company website template
• [Front-end template] Responsive HTML5 template for educational service institutions
• [Front-end template] Online e-book store mall website template
• [Front-end template] IT technology solves Internet company website template
• [Front-end template] Purple style foreign exchange trading service website template

About us Disclaimer Sitemap

php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

B	D	C	A	B	A
												##A	0
0	0	1	1	1
											#C	0	1