I need to compare two strings, one is all characters and the other is has a few of them hidden. I need to mark the difference using CSS

example: Astring: 123哈哈哈321哈哈哈123哈哈哈 Bstring: 123***321***123***

result: '123哈哈哈321哈哈哈123哈哈哈'

I trying to use split with Astring and Bstring, and use forEach compare the difference with the index, when I get the index, I can use forEach, run Astring.split(''), and Astring.split('') compare with index, this index use CSS

let resultDom = document.querySelector('.resultDom')
let aStringWithSplit = [1, 2, 3, '哈', '哈', '哈', 3, 2, 1, '哈', '哈', '哈', 1, 2, 3, '哈', '哈', '哈']
let bStringWithSplit = [1, 2, 3, '*', '*', '*', 3, 2, 1, '*', '*', '*', 1, 2, 3, '*', '*', '*']
let getIndexWithHidden = []
let result = ''
bStringWithSplit.forEach((item, index) => {
  if (item === '*') {
    getIndexWithHidden.push(index)
  }
})
aStringWithSplit.forEach((item, index) => {
  if (getIndexWithHidden.indexOf(index) !== -1) {
    result  = `<span style='color: red;'>${item}</span>`
  } else {
    result  = `<span>${item}</span>`
  }
})
resultDom.innerHTML = result

<div class='resultDom'></div>

but this result have to many <span>, if this string too long, how can I improve this code?

CodePudding user response：

Your code looks like it should work to compare the two strings and mark the differences using CSS. One thing to note is that you are using a DOM element (resultDom) to store the result, but you may want to store the result in a variable instead. This will make it easier to manipulate and access the result later on.

Also, you can simplify your code by using a single for loop to iterate over both arrays and compare the values at each index. This will avoid the need to use the .forEach() method and the .indexOf() method. Here's an example of how you can do this:

let result = '';

for (let i = 0; i < aStringWithSplit.length; i  ) {
  if (bStringWithSplit[i] === '*') {
    result  = `<span style='color: red;'>${aStringWithSplit[i]}</span>`;
  } else {
    result  = `<span>${aStringWithSplit[i]}</span>`;
  }
}

resultDom.innerHTML = result;

enter code here

CodePudding user response：

You don't need to split anything because strings can already be indexed like arrays, and you only need to run the loop once because you know the strings will be the same length. This will make your code a bit faster

Also, as Rene van der Lende pointed out in a comment, you only need to add a <span> tag if the text is colored.

let a = '123哈哈哈321哈哈哈123哈哈哈';
let b = '123***321***123***';

let result = '';
for (let i = 0; i < a.length; i  ) {
  const item = a[i];
  result  = item !== b[i] ? `<span style='color: red;'>${item}</span>` : `${item}`;
}

document.querySelector('.resultDom').innerHTML = result;

<div class='resultDom'></div>

I also used the ternary operator instead of an if-else statement to make the code a bit shorter. This isn't required, but it looks nicer.

CodePudding user response：

To reduce the number of <span>s, you can group adjacent similar values and add them all to a single <span>, here is an example:

const a = '123哈哈哈321哈哈哈123哈哈哈';
const b = '123***321***123***';

const result = b.split(/(\* )/).reduce((acc, curr) => {
  const group = a.substring(acc.prevIndex, acc.prevIndex   curr.length);
  if (curr.includes('*')) {
    acc.result  = `<span style="color: red">${group}</span>`
  } else {
    acc.result  = group;
  }
  acc.prevIndex  = curr.length
  return acc;
}, { prevIndex: 0, result: '' }).result;

document.querySelector('#output').innerHTML = result;

<div id="output"><div>

Here, I've used b.split(/(\* )/) to split the mask string into groups of adjacent * and groups of adjacent other characters.

Then, I'm reducing the array of groups and, I'm using a.substring(acc.prevIndex, acc.prevIndex curr.length) (where acc.prevIndex is the number of characters that have been processed so far and curr.length is the length of the current group) to get the characters from the string that needs to be processed and then, add them to a <span> if the group is all * characters.